为什么要减少DOM操作

今天，在这学习vue，突然想到一个问题，我jQuery用的这么爽，看到什么元素，想操作dom就直接选中进行变化，好像没什么不方便的啊？那为啥我用的jQuery操作dom的构建页面的方法就这么被淘汰了呢？

那就问百度吧。

结果基本一面倒的都在说需要减少dom层的操作，原因，就是因为操作dom慢。

至于为啥慢，就涉及到浏览器渲染页面。浏览器分为：渲染引擎和js引擎。

渲染引擎工作：

• 解析HTML代码，生产DOM tree
• 解析CSS样式，结合DOM tree生产Render tree（display: none;的结点不会存在Render tree上，最后不会被paint）
• 计算Render tree各个节点的布局信息，比如box的位置、尺寸、颜色、外形等
• 根据计算后的布局信息，调用浏览器的UI引擎进行渲染。

而操作dom会产生几种动作，极大的影响渲染的效率。其中 layout（布局）和paint（绘制）是最大的。

• layout 就是布局变动造成重新计算（耗CPU，有时也很耗内存）
  
• paint 就是调用浏览器UI引擎进行渲染展示页面（耗CPU和内存）
  

其中大部分都应该算是摘抄自这个博客里的，讲的很透（https://my.oschina.net/u/1580821/blog/744684）

然后呢，在百度的过程中，又get到一个新鲜概念，虚拟DOM。

至于虚拟DOM呢，就直接把在百度上搜到的一个比较好的解释（其实算是与DOM的异同比较，但是感觉理解更容易）

虚拟DOM与真实DOM的区别（注意：需不需要虚拟DOM，其实与框架的DOM操作机制有关）：

1. 虚拟DOM不会进行排版与重绘操作

2. 虚拟DOM进行频繁修改，然后一次性比较并修改真实DOM中需要改的部分（注意！），最后并在真实DOM中进行排版与重绘，减少过多DOM节点排版与重绘损耗

3. 真实DOM频繁排版与重绘的效率是相当低的

4. 虚拟DOM有效降低大面积（真实DOM节点）的重绘与排版，因为最终与真实DOM比较差异，可以只渲染局部（同2）

使用虚拟DOM的损耗计算：

总损耗 = 虚拟DOM增删改 + （与Diff算法效率有关）真实DOM差异增删改 + （较少的节点）排版与重绘

直接使用真实DOM的损耗计算：

总损耗 = 真实DOM完全增删改 + （可能较多的节点）排版与重绘

总之，一切为了减弱频繁的大面积重绘引发的性能问题，不同框架不一定需要虚拟DOM，关键看框架是否频繁会引发大面积的DOM操作

总之呢，因为这个没法绕开的问题，DOM操作就这么被主流的前端框架 所抛弃了。顺便也让我后知后觉的被主流拍到了沙滩上。

anyway，学吧，补充自己吧，加油！