浏览器渲染流程

一、是什么

浏览器渲染流程是指：从接收到 HTML 到最终页面展示的整个过程。

核心流程：

1. HTML → DOM
2. CSS → CSSOM
3. 合并 → Render Tree
4. Layout（回流）
5. Paint（重绘）

二、为什么

理解渲染流程可以帮助我们：

• 优化页面性能
• 减少卡顿
• 理解重排重绘
• 写出高性能代码

三、核心原理

1. DOM 构建

浏览器解析 HTML，生成 DOM 树

<div>Hello</div>

↓

Document
 └── div

2. CSSOM 构建

解析 CSS 生成 CSSOM

3. Render Tree

DOM + CSSOM → Render Tree（只包含可见节点）

4. Layout（回流）

计算元素位置和尺寸

5. Paint（重绘）

将元素绘制到屏幕

四、流程图

HTML → DOM
CSS → CSSOM
        ↓
   Render Tree
        ↓
      Layout
        ↓
      Paint

五、优化建议

• 减少 DOM 操作
• 合并样式修改
• 避免频繁触发回流
• 使用 GPU 加速（transform）