重绘与回流

一. 浏览器渲染机制

Steps:

1. 处理 HTML 并构建 DOM 树
2. 处理 CSS 构建 CSSOM 树
3. 将 DOM 与 CSSOM 合并成一个渲染树
4. 根据渲染树来布局，计算每个节点的位置
5. 调用 GPU 绘制，合成图层，显示在屏幕上

二. 重绘 (Repaint)

当元素样式的改变不影响布局时，浏览器将使用重绘对元素进行更新，此时由于只需要UI层面的重新像素绘制，因此 损耗较少

三. 回流 (Reflow)

当元素的尺寸、结构或触发某些属性时，浏览器会重新渲染页面，称为回流。此时，浏览器需要重新经过计算，计算后还需要重新页面布局，因此是较重的操作

触发回流的操作:

• 页面初次渲染
• 浏览器窗口大小改变
• 元素尺寸、位置、内容发生改变
• 元素字体大小变化
• 添加或者删除可见的 dom 元素
• 激活 CSS 伪类（例如：:hover）
• 查询某些属性或调用某些方法

总结:

• 回流必定触发重绘，重绘不一定触发回流
• 重绘的开销较小，回流的代价较高
• 能不触发回流就不触发

参考：

1. 浏览器的回流与重绘 (Reflow & Repaint)
2. 你真的了解回流和重绘吗