虚拟DOM, 经常出现的名词

2020-03-02 15:55:17 阅读：267 来源： 互联网

七七八八，模模糊糊，每周一个知识点总结开始记录，今天来记录下虚拟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,性能,虚拟,https,操作,经常出现
来源： https://www.cnblogs.com/Tiboo/p/12389321.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

虚拟DOM, 经常出现的名词