浏览器渲染流程

问题

解释浏览器从接收 HTML 到在屏幕上显示像素的渲染过程。

答案

浏览器渲染过程包含以下几个步骤：

1. 解析 HTML → DOM 树

浏览器解析 HTML 并构建 DOM（文档对象模型）树。

2. 解析 CSS → CSSOM 树

CSS 被解析成 CSSOM（CSS 对象模型）树。

3. 合并 → 渲染树

DOM 和 CSSOM 合并形成渲染树（只包含可见元素）。

4. 布局（回流）

计算每个元素的精确位置和大小。

5. 绘制

为每个元素填充像素（颜色、边框、阴影、文本）。

6. 合成

合并不同的图层并显示在屏幕上。

性能优化建议

• 批量进行 DOM 更改以减少回流
• 使用 transform 和 opacity 进行动画（GPU 加速）
• 避免强制同步布局