Reflow、Repain的优化

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

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

重绘（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. CSS3 Animation或Transition


8. 读取元素的某些属性(offsetWidth,offsetTop,offsetHeight,offsetLeft,getComputedStyle 等)

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

所以为了避免回流提高页面性能，前端开发需要注意的主要是这两点：避免大量的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!'));

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

• 避免逐项更改样式。最好一次性更改style属性，或者将样式列表定义为class并一次性更改class属性。
• 避免循环操作DOM。创建一个documentFragment或div，在它上面应用所有DOM操作，最后再把它添加到window.document。
• 也可以在一个display:none的元素上进行操作，最终把它显示出来。因为display:none上的DOM操作不会引发回流和重绘。
• 避免循环读取offsetLeft等属性。在循环之前把它们存起来。
• 绝对定位具有复杂动画的元素。绝对定位使它脱离文档刘，否则会引起父元素及后续元素大量的回流
• 使用CSS3的transition也可以获得不错的性能。