浏览器页面渲染原理深度解析（附完整流程图解）

一、浏览器渲染流程全景图

---

二、关键渲染阶段详解

1. 解析阶段（Parsing）

DOM与CSSOM构建

双线程协作模型：

• 主线程：顺序解析HTML，构建DOM树

• 预解析线程：预加载外部资源

• 遇到<script>立即停止DOM解析

• CSS加载不阻塞HTML解析（通过预解析线程）

2. 样式计算（Style Calculation）

融合三种样式来源：

1. 浏览器默认样式

2. 外部/内部样式表

3. 行内样式

示例转换：

• red → rgb(255,0,0)

• 2em → 32px（基于