浏览器渲染过程、回流与重绘的区别

「这是我参与2022首次更文挑战的第12天，活动详情查看：2022首次更文挑战」

简述一下浏览器渲染过程

浏览器内核拿到内容后，渲染步骤大致可以分为以下几步：

1. 解析HTML生成DOM树
2. 解析CSS生成CSSOM树
3. 将DOM树与CSSOM树进行合并生成render渲染树
4. 布局render树（reflow）计算节点元素的样式
5. 绘制render树（repaint）
6. 最后将绘制好的render树显示到浏览器中（display）

大致流程如下图：

解析HTML生成DOM树

解析HTML生成DOM树会有以下步骤：

1. 浏览器获取二进制数据（Bytes）
2. 将二进制数据进行转换成字符串（characters）
3. 将转换完毕的字符串进行分词处理（tokens）
4. 根据分词生成node节点（tokens）
5. 最后将所有node节点组装成dom树

解析CSS生成CSSOM树

解析CSS生成CSSOM树与解析HTML生成DOM树相似分为以下步骤：

1. 浏览器获取二进制数据（Bytes）
2. 将二进制数据进行转换成字符串（characters）
3. 将转换完毕的字符串进行分词处理（tokens）
4. 根据分词生成node节点（tokens）
5. 最后将所有node节点组装成CSSOM树

将DOM树与CSSOM树进行合并生成render渲染树

将DOM树与CSSOM结合起来生成render渲染树。此时render渲染树与DOM树不一定是一一对应的。因为会有一些不有显示的标签比如html、head等。

布局render渲染树（reflow）

计算节点元素的内容与节点元素的样式，主要是对一些布局相关样式进行计算的。

绘制render渲染树（repaint）

将计算完毕的render渲染树进行绘制（repaint）

显示（display）

最后显示到页面中（display）

回流与重绘的区别

当我们动态的修改了DOM或者CSS就会导致页面重新布局（reflow）或者是重新渲染（repaint）。

• Reflow 回流，由于元素的内容、结构、位置或尺寸发生了变化，需要重新计算样式和渲染树
• Repaint 重绘，由于元素发生的改变只是影响了元素的一些外观之类的时候（例如，背景色，边框颜色，文字颜色等），此时只需要应用新样式绘制这个元素就可以了。

回流的成本开销是要高于重绘，而且一个节点的回流往往回导致子节点以及同级节点的回流。我们可以通过避免回流来进行性能优化。