曾经比较流行的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比较差异,可以只渲染局部。