重绘及回流

浏览器的渲染过程

1. 解析HTML，生成DOM树，解析CSS，生成CSSOM树
2. 将DOM树和CSSOM树结合，生成渲染树(Render Tree)
3. Layout(回流):根据生成的渲染树，进行回流(Layout)，获得节点的几何信息（位置，大小）
4. Painting(重绘):根据渲染树以及回流获得的几何信息，获得节点的绝对像素
5. Display:将像素发送给GPU，展现在页面上。

为了构建渲染树，浏览器主要完成了如下工做：

1. 从DOM树的根节点开始遍历每一个可见节点。
2. 对于每一个可见的节点，找到CSSOM树中对应的规则，并应用它们。
3. 根据每一个可见节点以及其对应的样式，组合生成渲染树。

第一步中，既然说到了要遍历可见的节点，那么咱们得先知道，什么节点是不可见的。不可见的节点包括：

1. 一些不会渲染输出的节点，好比script、meta、link等。
2. 一些经过css进行隐藏的节点。好比display:none。注意，利用visibility和opacity隐藏的节点，仍是会显示在渲染树上的。只有display:none的节点才不会显示在渲染树上。

回流

前面咱们经过构造渲染树，咱们将可见DOM节点以及它对应的样式结合起来，但是咱们还须要计算它们在设备视口(viewport)内的确切位置和大小，这个计算的阶段就是回流。

重绘

最终，咱们经过构造渲染树和回流阶段，咱们知道了哪些节点是可见的，以及可见节点的样式和具体的几何信息(位置、大小)，那么咱们就能够将渲染树的每一个节点都转换为屏幕上的实际像素，这个阶段就叫作重绘节点。

什么时候发生回流

回流这一阶段主要是计算节点的位置和几何信息，那么当页面布局和几何信息发生变化的时候，就须要回流。好比如下状况：

1. 添加或删除可见的DOM元素
2. 元素的位置发生变化
3. 元素的尺寸发生变化（包括外边距、内边框、边框大小、高度和宽度等）
4. 内容发生变化，好比文本变化或图片被另外一个不一样尺寸的图片所替代。
5. 页面一开始渲染的时候（这确定避免不了）
6. 浏览器的窗口尺寸变化（由于回流是根据视口的大小来计算元素的位置和大小的）

浏览器的优化机制

现代的浏览器都是很聪明的，因为每次重排都会形成额外的计算消耗，所以大多数浏览器都会经过队列化修改并批量执行来优化重排过程。浏览器会将修改操做放入到队列里，直到过了一段时间或者操做达到了一个阈值，才清空队列。可是！当你获取布局信息的操做的时候，会强制队列刷新，好比当你访问如下属性或者使用如下方法：

1. offsetTop、offsetLeft、offsetWidth、offsetHeight
2. scrollTop、scrollLeft、scrollWidth、scrollHeight
3. clientTop、clientLeft、clientWidth、clientHeight
4. getComputedStyle()
5. getBoundingClientRect

减小重绘与回流

CSS

1. 使用 transform 替代 top
2. 使用 visibility 替换 display: none ，由于前者只会引发重绘，后者会引起回流（改变了布局
3. 避免使用table布局，可能很小的一个小改动会形成整个 table 的从新布局。
4. 尽量在DOM树的最末端改变class，回流是不可避免的，但能够减小其影响。尽量在DOM树的最末端改变class，能够限制了回流的范围，使其影响尽量少的节点。
5. 避免设置多层内联样式，CSS 选择符从右往左匹配查找，避免节点层级过多。
6. 将动画效果应用到position属性为absolute或fixed的元素上，避免影响其余元素的布局，这样只是一个重绘，而不是回流，同时，控制动画速度能够选择 requestAnimationFrame，详见探讨 requestAnimationFrame。
7. 避免使用CSS表达式，可能会引起回流。
8. 将频繁重绘或者回流的节点设置为图层，图层可以阻止该节点的渲染行为影响别的节点，例如will-change、video、iframe等标签，浏览器会自动将该节点变为图层。

9. CSS3 硬件加速（GPU加速），使用css3硬件加速，可让transform、opacity、filters这些动画不会引发回流重绘 。

   JavaScript

10. 避免频繁操做样式，最好一次性重写style属性，或者将样式列表定义为class并一次性更改class属性。
11. 避免频繁操做DOM，建立一个documentFragment，在它上面应用全部DOM操做，最后再把它添加到文档中。
12. 避免频繁读取会引起回流/重绘的属性，若是确实须要屡次使用，就用一个变量缓存起来。
13. 对具备复杂动画的元素使用绝对定位，使它脱离文档流，不然会引发父元素及后续元素频繁回流。