减少页面回流与重绘（Reflow & Repaint）

如果你的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发生渐进回流时，意味着它前面的元素都没有变， 而是它里面的元素变了。这会引起自底向上的作用。