回流和重绘 & 浏览器渲染机制

浏览器渲染机制

1. 解析HTML，生成DOM树，解析CSS，生成CSSOM树
2. 将DOM树和CSSOM树结合，生成渲染树(Render Tree)
   1. 从DOM树的根节点开始遍历每个可见节点。
      • 一些不会渲染输出的节点，比如script、meta、link等。
      • 一些通过css进行隐藏的节点。比如display:none。注意，利用visibility和opacity隐藏的节点，还是会显示在渲染树上的。只有display:none的节点才不会显示在渲染树上。
   2. 对于每个可见的节点，找到CSSOM树中对应的规则，并应用它们。
   3. 根据每个可见节点以及其对应的样式，组合生成渲染树。
3. Layout(回流):根据生成的渲染树，进行回流(Layout)，得到节点的几何信息（位置，大小）
4. Painting(重绘):根据渲染树以及回流得到的几何信息，得到节点的绝对像素
5. Display:将像素发送给GPU，展示在页面上。（这一步其实还有很多内容，比如会在GPU将多个合成层合并为同一个层，并展示在页面中。而css3硬件加速的原理则是新建合成层）

回流和重绘

触发回流的条件
计算DOM节点在设备视口(viewport)内的确切位置和大小，计算节点的位置和几何信息，那么当页面布局和几何信息发生变化的时候，就需要回流。

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

回流一定会触发重绘，而重绘不一定会回流

触发重绘的条件：不改变元素位置，如background-color等

优化：

浏览器优化机制

大多数浏览器都会通过队列化修改并批量执行来优化重排过程。浏览器会将修改操作放入到队列里，直到过了一段时间或者操作达到了一个阈值，才清空队列。但是！当你获取布局信息的操作的时候，会强制队列刷新，比如当你访问以下属性或者使用以下方法：

• offsetTop、offsetLeft、offsetWidth、offsetHeight
• scrollTop、scrollLeft、scrollWidth、scrollHeight
• clientTop、clientLeft、clientWidth、clientHeight
• getComputedStyle()
• getBoundingClientRect

以上属性和方法都需要返回最新的布局信息，因此浏览器不得不清空队列，触发回流重绘来返回正确的值。因此，我们在修改样式的时候，最好避免使用上面列出的属性，他们都会刷新渲染队列。如果要使用它们，最好将值缓存起来（先将位置信息存入变量中，之后调用变量而不是使用位置方法）。

减少回流和重绘

• 合并多次对DOM和样式的修改，然后一次处理掉。
  1. 使元素脱离文档流
     • 隐藏元素，应用修改，重新显示
     • 使用文档片段(document fragment)在当前DOM之外构建一个子树，再把它拷贝回文档。
     • 将原始元素拷贝到一个脱离文档的节点中，修改节点后，再替换原始的元素。
  2. 对其进行多次修改
  3. 将元素带回到文档中。
• 复杂动画效果,使用绝对定位让其脱离文档流
• css3硬件加速（GPU加速）：划重点：使用css3硬件加速，可以让transform、opacity、filters、will-change这些动画不会引起回流重绘 。但是对于动画的其它属性，比如background-color这些，还是会引起回流重绘的，不过它还是可以提升这些动画的性能。