虚拟DOM, 经常出现的名词

七七八八，模模糊糊，每周一个知识点总结开始记录，今天来记录下虚拟DOM这个知识点

List1: 什么是虚拟DOM？

ta是一个对象，一个模拟DOM树的对象，包含了 tag、props、children 三个属性

<div id="app">
  <p class="text">hello world!!!</p>
</div>

上面的HTML转换成虚拟DOM如下：

{
  tag: 'div',
  props: {
    id: 'app'
  },
  chidren: [
    {
      tag: 'p',
      props: {
        className: 'text'
      },
      chidren: [
        'hello world!!!'
      ]
    }
  ]
}

List2: 他是用来解决什么问题？

虚拟DOM是为了解决浏览器性能问题而被设计出来。例如，我们一个操作中有3次更新DOM的操作，此时虚拟DOM不会立即操作DOM进行页面更新，而是将这三次更新的内容保存到本地的JS对象上，最后将这个对象一次性更新到真实的DOM树上，交由浏览器去绘制，这样以此避免了大量无谓的计算。

补充：很多人认为虚拟 DOM 最大的优势是 diff 算法，减少 JavaScript 操作真实 DOM 的带来的性能消耗。虽然这是虚拟 DOM 带来的一个优势，但并不是全部。虚拟 DOM 最大的优势在于抽象了原本的渲染过程，实现了跨平台的能力，而不仅仅局限于浏览器的 DOM，可以是安卓和 IOS 的原生组件，可以是近期很火热的小程序，也可以是各种GUI。（抄来的，最大优势那块暂时理解不是很透彻）

List3: 稍等，弱弱问句为啥操作DOM性能开销大le？

其实不是查询DOM树开销大，而是DOM树模块与JS模块是分开的, 这些模块间的通讯增加了开销。再加上操作DOM会导致页面重绘or回流, 使得性能开销巨大，在当今移动端吃香的天下，而手机性能参差不齐，性能问题就显得尤为突出。

List4: 那虚拟DOM是怎样提升性能的le?

DOM发生变化时，通过diff算法比对JavaScript原生对象，计算出需要变更的DOM,然后只对变化的DOM进行操作，而不是更新整个视图

List5: 那么如何将HTML转换成虚拟DOM le？

观察现今主流的虚拟DOM库snabbdom、virtual-dom，通常都有一个h函数，也就是 React 中的 React.createElement，以及 Vue 中的 render 方法中的 createElement。而React 是通过 babel 将 jsx 转换为 h 函数渲染的形式，而 Vue 是使用 vue-loader 将模版转为 h 函数渲染的形式，整个h函数返回的就是虚拟DOM的对象

TO DO: 后续还将涉及diff算法，后面再次补上

参考资料：

1) https://juejin.im/post/5c051597e51d45517b0cf7e6 (什么是虚拟DOM)

2) https://efe.baidu.com/blog/the-inner-workings-of-virtual-dom/ (Vitual DOM的内部工作原理)

3) https://juejin.im/post/5d085ce85188255e1305cda1#heading-1 (虚拟DOM到底是什么)

4) https://juejin.im/post/5d36cc575188257aea108a74#heading-14(深入剖析：Vue核心之虚拟DOM)

虚拟DOM, 经常出现的名词

猜你喜欢