浏览器重排和重绘——JavaScript之DOM性能优化

渲染树：表示DOM节点如何显示。在DOM树中的每一个需要显示的节点在渲染树中至少存在一个对应的节点。该节点又叫盒子或帧，符合CSS模型的规定，为一个具有padding、margin、border和position的盒子。一旦DOM和渲染树构建完成，浏览器就开始显示页面。

    当DOM的变化影响了元素的几何属性（宽、高、增加行数），浏览器需要重新计算元素的几何属性，同样其它元素的几何属性和位置也因此受到影响。浏览器会使渲染树中受到影响的部分失效，并重新构造渲染树（重排--reflow）。完成重排后，浏览器会重新绘制受到影响的部分到屏幕中（重绘--repaint）。

重排（reflow）：

（1）添加或删除可见的DOM元素；

（2）元素位置的改变；

（3）元素尺寸的改变（padding、margin、border、height和width）；

（4）内容改变，例如文本改变或图片被另一个不同尺寸的图片替代；

（5）页面渲染器初始化；

（6）浏览器窗口尺寸改变。

 

浏览器通过队列化修改并批量执行来优化重排过程。获取一下布局信息会导致队列刷新：

（1）offsetTop, offsetLeft, offsetWidth, offsetHeight

（2）scrollTop, scrollLeft, scrollWidth, scrollHeight

（3）clientTop, clientLeft, clientWidth, clientHeight

（4）getComputedStyle(),  currentStyle

 

最小化重绘和重排

1、改变样式:一次性修改样式

（1）使用cssText：element.style.cssText = cssStyle;

             或：element.style.cssText += cssStyle;

（2）修改元素的class

 

2、批量修改DOM

（1）使元素脱离文档流（重绘）

    a.隐藏元素，应用修改，重新显示

    b.使用文档片段（document fragment）在当前DOM之外构建一个子树，再把它拷贝回文档

    c.将原始元素拷贝到一个脱离文档的节点中，修改副本，完成后再替换原始元素。

（2）对其应用多重改变；

（3）把元素带回文档中（重绘）。

3、缓存布局信息

4、让元素脱离动画流

（1）使用绝对定位页面上的动画元素，将其脱离文档流

（2）让元素动起来。当它扩大时，会临时覆盖部分页面。但这只是一个小区域的重绘过程，不会产生重排并重绘页面大部分内容

（3）当动画结束时付汇定位，从而只会下移一次文档的其他元素

5、IE和:hover

在IE中大量使用:hover会降低响应速度。