对 Virtual DOM 的理解

Virtual DOM

涉及面试题：什么是 Virtual DOM？为什么 Virtual DOM 比原生 DOM 快？

Virtual DOM 是一个用JS模拟的DOM结构的树形结构

那么相较于 DOM 来说，操作 JS 对象会快很多，并且我们也可以通过 JS 来模拟 DOM

const ul = {
  tag: 'ul',
  props: {
    class: 'list'
  },
  children: {
    tag: 'li',
    children: '1'
  }
}

上述代码对应的 DOM 就是

<ul class='list'>
  <li>1</li>
</ul>

那么既然 DOM 可以通过 JS 对象来模拟，反之也可以通过 JS 对象来渲染出对应的 DOM。当然了，通过 JS 来模拟 DOM 并且渲染对应的 DOM 只是第一步，难点在于如何判断新旧两个 JS 对象的最小差异并且实现局部更新 DOM。

• 首先从上至下，从左往右遍历对象，也就是树的深度遍历，这一步中会给每个节点添加索引，便于最后渲染差异
• 一旦节点有子元素，就去判断子元素是否有不同

在第一步算法中我们需要判断新旧节点的 tagName 是否相同，如果不相同的话就代表节点被替换了。如果没有更改 tagName 的话，就需要判断是否有子元素，有的话就进行第二步算法。

在第二步算法中，我们需要判断原本的列表中是否有节点被移除，在新的列表中需要判断是否有新的节点加入，还需要判断节点是否有移动。

对比原生DOM：

• 使用原生JS操作DOM是一件非常麻烦的事请，往往DOM标签和JS逻辑同时写在JS文件中，就会显得代码非常的冗余混乱，并且难以维护。另外一方面在浏览器里一遍又一遍的渲染DOM是非常非常消耗性能的，常常会出现页面卡死的情况
• 而Virtual DOM 就是将DOM的对比放在了JS层，通过对比不同之处来局部渲染的DOM节点，从而提高渲染效率。

当然了 Virtual DOM 提高性能是其中一个优势，其实最大的优势还是在于：

• 将 Virtual DOM 作为一个兼容层，让我们还能对接非 Web 端的系统，实现跨端开发。