减少页面回流与重绘(Reflow & Repaint)

CSS DOM HTML JavaScript 回流 重绘 队列 盒模型 clientHeight scrollHeight

如果你的HTML变得很大很复杂,那么影响你JavaScript性能的可能并不是JavaScript代码的复杂度,而是页面的回流和重绘。

回流(Reflow)是指布局引擎为frame计算图形的过程。 frame是一个矩形,拥有宽高和相对父容器的偏移。frame用来显示盒模型(content model), 但一个content model可能会显示为多个frame,比如换行的文本每行都会显示为一个frame。

关于CSS盒模型的介绍请参考:CSS 盒模型及其呈现方式

重绘(Repaint)发生在元素的可见性发生变化时,比如背景色、前景色等。 因此回流必然会引起重绘。

HTML 布局

HTML使用流式布局模型(flow based layout), 这意味着多数情况下一次扫描就可以计算所有的图形显示。 处于流后面的元素一般不会影响前面元素的图形, 所以布局过程可以从左到右、从上到下来进行。

所有的HTML回流都是从根frame开始(HTML标签)的,递归地处理部分或全部子frame。 回流过程中也可能创建新的frame,比如文本发生了换行。 一个frame的回流会导致它的所有父节点以及所有后续元素的回流。

有些HTML回流是立即执行的(immediate to user or script)并且会影响整个frame树, 比如窗口大小变化、更改文档的默认字体;有些HTML回流则是异步的、渐进的(incremental), 比如更多的文档流从网络中到达,这些渐进的回流可以入队列进行批量处理。

回流的原因

浏览器在实现回流时,会递归地处理frame。 每个frame的回流都有一个原因, 这个原因会随着frame逐级向下传递(传递过程中可能会改变)。 回流的原因决定了当前frame的回流行为,有这样5种原因:

  1. 初始化(Initial)。DOM载入后的第一次回流,将会遍历所有frame。
  2. 渐进(Incremental)。当一个frame发生渐进回流时,意味着它前面的元素都没有变, 而是它里面的元素变了。这会引起自底向上的作用。
  3. 改变大小(Resize)。元素的容器边界发生变化时,此时元素内部状态没变。 在计算自顶向下的布局约束的同时,可以复用内部状态。
  4. 样式改变(StyleChange)。整个frame树都应得到遍历。
  5. Dirty。当一个容器已经缓存了多个子元素的Incremental回流时,该容器出于Dirty的状态。

前面四种原因的回流都是在Presentation Shell中立即调用的, 而最后一种回流只有Incremental回流已经到达目标frame时才进行。 (因为这时自底向上的影响才被计算出来,才能决定容器的图形显示)

如果你是Web开发者,可能更关注的是哪些具体原因会引起浏览器的回流,下面罗列一下:

  1. 调整窗口大小
  2. 字体大小
  3. 样式表变动
  4. 元素内容变化,尤其是输入控件
  5. CSS伪类激活,在用户交互过程中发生
  6. DOM操作,DOM元素增删、修改
  7. width, clientWidth, scrollTop等布局宽高的计算(见视口的宽高与滚动高度一文)。

计算这些元素和布局大小时,浏览器会立即Flush渐进回流队列。

这些会引起回流的操作中,6、7 是和JavaScript代码相关的。 所以为了避免回流提高页面性能,前端开发需要注意的主要是这两点:避免大量的DOM操作和布局计算

最佳实践

避免布局宽高的计算,意味着尽量使用CSS而不是JS来实现页面的布局效果。 另外一方面,布局宽高的计算结果应当尽量保存避免重复计算。

下面来讨论如何避免大量的DOM操作。请看示例:

var s = document.body.style; 
s.padding = "2px"; // 回流+重绘
s.border = "1px solid red"; // 再一次 回流+重绘
s.color = "blue"; // 再一次重绘
s.backgroundColor = "#ccc"; // 再一次 重绘
s.fontSize = "14px"; // 再一次 回流+重绘
// 添加node,再一次 回流+重绘
document.body.appendChild(document.createTextNode('abc!'));

来源:http://www.blogjava.net/BearRui/archive/2010/05/10/320502.html

可见,通过DOM API进行CSS样式操作会产生大量的回流和重绘。 这一点是可以避免的,比如:预定义CSS类,在JS中进行类的替换(DOM 属性操作)即可。 除此之外,还有很多小技巧可以减少页面回流。下面来总结一下:

  1. 避免逐项更改样式。最好一次性更改style属性,或者将样式列表定义为class并一次性更改class属性。
  2. 避免循环操作DOM。创建一个documentFragmentdiv,在它上面应用所有DOM操作,最后再把它添加到window.document

    也可以在一个display:none的元素上进行操作,最终把它显示出来。因为display:none上的DOM操作不会引发回流和重绘。

  3. 避免循环读取offsetLeft等属性。在循环之前把它们存起来。
  4. 绝对定位具有复杂动画的元素。绝对定位使它脱离文档刘,否则会引起父元素及后续元素大量的回流。

    使用CSS3的transition也可以获得不错的性能。

Harttle

致力于简单的、一致的、高效的前端开发

看看这个?