前端
浏览器渲染原理
1. 渲染过程概述
浏览器渲染主要包括以下步骤：
- 解析HTML
- 构建DOM树
- 解析CSS, 构建CSSOM树
- 合并DOM和CSSOM，生成渲染树
- 布局（Layout）
- 绘制（Paint）
- 合成（Composite）
- 显示（Display）
2. 详细解析
2.1 解析HTML和构建DOM树
浏览器从服务器接收HTML文件后，会逐行解析HTML标记，将其转换为DOM（文档对象模型）节点，最终构建成一棵DOM树。
html
├── head
│ ├── meta
│ ├── title
│ ├── link
│ ├── script
│ └── style
└── body
├── h1
├── p
│ └── a
└── div
需要注意的是，js脚本执行会阻塞DOM树的构建，所以通常把js脚本放在body的底部或者使用 defer 属性。 浏览器是在主线程中，构建 DOM 树的。
浏览器构建 DOM 树时，这个过程占用了主线程。同时，预加载扫描器会解析可用的内容并请求高优先级的资源，如 CSS、JavaScript 和 web 字体。多亏了预加载扫描器，我们不必等到解析器找到对外部资源的引用时才去请求。它将在后台检索资源，而当主 HTML 解析器解析到要请求的资源时，它们可能已经下载中了，或者已经被下载。预加载扫描器提供的优化减少了阻塞。 ---- MDN 预加载扫描器
2.2 解析CSS和构建CSSOM树
与解析HTML类似，浏览器也会解析CSS文件和 <style> 标签中的内容，构建CSSOM（CSS对象模型）树。
2.3 构建渲染树
DOM树和CSSOM树合并后，形成渲染树。渲染树只包含需要显示的节点及其样式信息。 其中使用 display: none 的元素不会加入渲染树。 每个节点包含用于绘制页面的具体样式信息，例如尺寸、位置、颜色、字体等信息，这些信息在后续的布局（Layout）阶段会被用于确定元素的具体显示位置和大小。
2.4 布局（Layout）
布局阶段浏览器通过遍历渲染树，计算每个元素在页面中的位置和尺寸。 第一次确定每个节点的大小和位置称为布局。随后对节点大小和位置的重新计算称为重排(reflow 回流)。
2.5 绘制（Paint）
浏览器在布局阶段确定了元素的尺寸和位置后，会根据一些规则（如 z-index、position、transform 等）决定哪些元素需要提升为独立的图层，每个图层独立渲染，提高渲染效率。 绘制阶段的主要任务是遍历渲染树，为每个可见节点生成绘制指令：这些绘制指令描述了如何在屏幕上绘制元素的各个部分，例如文本、颜色、边框、阴影、背景等。 绘制指令生成后，浏览器会将这些指令转换为位图，这个过程称为光栅化。光栅化可以在CPU或GPU上执行，生成每个图层的位图。
2.6 合成（Composite）
GPU会将多个图层合成为一个最终的图像。这个过程称为图层合成。图层之间可以有不同的叠放顺序和透明度，GPU会根据这些信息将所有图层组合成最终的页面，最终合成的结果会被显示在屏幕上。
CSS 的 transform 属性主要影响的是合成阶段，而不需要参与布局或绘制。这是因为 transform 通常不会影响元素的尺寸或其他页面布局信息，而是对已经绘制好的图层进行几何变换（如平移、旋转、缩放等）。