浏览器重排和重绘——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会降低响应速度。