浏览器如何渲染网页？

浏览器渲染网页的核心流程是一系列有序步骤，目的是将 HTML、CSS 和 JavaScript 转换为可视化的用户界面。以下是关键步骤的简化描述：

1. HTML 解析与 DOM 构建：浏览器网络线程收到 HTML 后，启动渲染主线程解析 HTML，生成 Document Object Model (DOM) tree。DOM 树表示文档结构（如节点和文本）。预解析线程并行下载外部 CSS 和 JavaScript。若解析遇到 JavaScript，会阻塞 HTML 解析直到脚本下载和执行完毕。CSS 的加载不会阻塞 HTML 解析，因为它通常由预解析线程处理。

2. CSS 解析与 CSSOM 构建：浏览器解析内联或外部的 CSS 代码，构建 CSS Object Model (CSSOM) tree。CSSOM 树存储页面的所有 CSS 规则及其级联关系。这一步不可部分执行（即需完全加载 CSS 资源），且可能导致渲染阻塞（因计算特定性）。

3. 执行 JavaScript：如果存在 JavaScript 脚本，浏览器会执行它们。JavaScript 可以操作 DOM 或 CSSOM，导致重新进入后续步骤（如回流动）。此执行阶段通常会暂停渲染，并取决于脚本特性（如 async 或 defer 属性改变加载行为）。

4. 构建渲染树：合并 DOM tree 和 CSSOM tree，生成 Render tree。这棵树仅包含可见元素（例如移除 display: none 节点），并计算每个节点的最终样式属性。渲染树用于实际屏幕绘制。

5. 布局/回流 (Layout/Reflow)：布局阶段计算渲染树中每个节点的确切位置和大小（基于盒子模型），产出屏幕坐标框架。若元素变化（如尺寸调整），会触发行程（重新计算布局）。

6. 分层 (Layering)：为提高渲染效率，浏览器将页面划分为多个 layer（分层）。每个 layer 独立处理，便于动画优化或重绘控制。这个过程是渲染流水线的一部分，但非所有引擎都显式分步实现。

7. 绘制/光栅化 (Paint/Rasterization)：遍历渲染树每个节点，转化为像素数据。光栅化指将向量路径（如文本或图像）转换为屏幕像素矩阵的过程。如果有背景图片或其他嵌入元素，会在此时加载并绘制。

8. 画屏 (Composite/Displaying)：将分层光栅化输出合并成最终帧缓存区，送至显示器进行硬件输出。这完成页面的渲染呈现。

这些步骤可并行或循环（如回流动触发电路复检）。真实渲染通过事件循环驱动，在浏览器主线程中异步执行。优化目标是最小化块时间和布局重复。现在，大多数浏览器引擎（如 Blink 或 WebKit）实现类似的流程以达到高效体验。