JS中为什么要减少DOM操作？

曾经比较流行的jquery框架主要优点之一：出色的DOM操作的封装。但是，目前流行的框架中基本上都摒弃了DOM操作的方法。

主要原因大致上都是在说要减少dom层的操作，原因是因为dom操作慢。

那么dom操作为什么慢？

这就要提及浏览器渲染页面，浏览器分为：渲染引擎和js引擎。

渲染引擎工作：

        1、解析HTML代码，生产DOM tree。

        2、解析CSS样式，结合DOM tree生产Render tree（display：none；的结点不会存在Render tree上，最后不会被paint）。

        3、计算Render tree 各个节点的布局信息，比如box的位置、尺寸、颜色、外形等。

        4、根据计算后的布局信息，调用浏览器的UI引擎进行渲染。

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

        1、layout就是布局变动造成重新计算（耗CPU，有时也很耗内存）。

        2、paint就是调用浏览器UI引擎进行渲染展示页面（耗cpu和内存）。

虚拟DOM

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

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

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

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