浅析 网页中的回流(reflow)和重绘(repaints)

浏览器对页面的呈现的处理流程

1. 文档初次加载时，浏览器引擎会解析HTML文档来构建DOM树
2. 之后根据DOM元素的几何属性构建一棵用于渲染的树。
3. 渲染树的每个节点都有大小和边距等属性，类似于盒子模型。
4. 当渲染树构建完成后，浏览器 就可以将元素放置到正确的位置了，再根据渲染树节点的样式属性绘制出页面。
   

回流(reflow)：

渲染树中的一部分（或全部）因为元素的规模尺寸、布局、隐藏等改变而需要重新构建。

每个页面至少需要一次回流，就是在页面第一次加载的时候。

重绘(repaints)：

当渲染树中的一些元素需要更新属性，而这些属性只是影响元素的外观、风格，而不会影响布局，如 background-color。

何时发生（重绘+回流）？

1. 对用户操作（如改变浏览器大小、改变浏览器的字体大小）
2. 增加或者移除样式表
3. 内容变化，比如用户在input框中输入文字
4. 激活 CSS 伪类
5. 操作 class 属性
6. 脚本操作
7. 计算 offsetWidth 和 offsetHeight 属性
8. 隐藏元素（display:none; 回流+重绘 / visiblity：hidden；重绘，不回流)

• transform 不重绘，不回流
  是因为transform属于合成属性，对合成属性进行transition/animate动画时，将会创建一个合成层。这使得动画元素在一个独立的层中进行渲染。当元素的内容没有发生改变，就没有必要进行重绘。浏览器会通过重新复合来创建动画帧。

• 回流必将引起重绘，而重绘不一定会引起回流。

var s = document.body.style;
s.padding = "2px"; // 回流+重绘
s.border = "1px solid red"; // 再一次 回流+重绘
s.color = "blue"; // 再一次重绘
s.backgroundColor = "#ccc"; // 再一次 重绘
s.fontSize = "14px"; // 再一次 回流+重绘

document.body.appendChild(document.createTextNode('abc!'));
// 添加node，再一次 回流+重绘

浏览器优化：

从上述代码可以看出，简单的几行代码就引起了6次左右的回流。回流的花销跟 render tree 有多少个节点需要重新构建有关系。如果每句代码都回流重绘的话，浏览器会崩溃的。所以很多浏览器都会优化这些操作。

浏览器会维护一个队列，把所有引起回流重绘的操作放入这个队列，当队列中的操作到达一定数量或者一定时间间隔后，浏览器就会flush队列，进行批处理。这样就会让这些操作变成仅一次的回流重绘，大大减少了浏览器的负担。

但是，有时候我们写的一些代码可能会强制浏览器提前 flush 队列，这样就体现不了优化的好处了。比如执行下面这些操作时，浏览器为了呈现最精准的值，就会 flush 队列。

• offsetTop，offsetLeft，offsetWidth， offsetHeight
• scrollTop / Left / Width / Height
• clientTop / Left / Width / Height
• width，height
• 请求了getComputedStyle()，或者 IE的 currentStyle

如何减少回流、重绘？

（在CSS中）

• 尽可能在 DOM 树的最末端改变 class
• 避免设置多项内联样式
• 动画效果应用到 position 属性或 fixed 的元素上
• 牺牲平滑度换取速度
• 避免使用 table 布局
• 避免使用 CSS 的 JavaScript 表达式（仅IE浏览器）

参考1：页面重绘和回流以及优化
参考2：回流与重绘：CSS性能让JavaScript变慢？