从Chromium架构看浏览器执行机制

下文基于最新 Chromium 架构（2024–2025）+ WHATWG 事件循环规范。

现代浏览器进程模型（Chromium Site Isolation 架构）

​现代浏览器是多进程架构，每个 Render Process （渲染进程）中有多个线程（主线程、合成线程、raster（光珊化） 线程等）。​Chrome 至少包含：

Renderer 进程内部线程模型

Renderer 内部不是单线程，而是一个复杂的​多线程渲染系统​：

“JS 只在 Renderer 主线程执行（通过事件循环处理 Task 和 Job），渲染管线（style→layout→paint→composite）会在（compositor/GPU 线程）协作：主线程生成绘制命令 → 合成线程处理 → raster 线程光栅化 → GPU 合成。”

事件循环

老说法：宏任务 / 微任务

这只适合 JS 引擎，不符合浏览器标准。

新标准（WHATWG）

浏览器遵循：

• Task（原来所谓“宏任务”）
• Microtask/Job（微任务）

但注意，浏览器将 Task 分为多个不同的 Task Queue：

最新循环模型（Chrome / WHATWG）

while (true) { 执行一个 Task (浏览器任务队列) 执行所有 Microtask（Job Queue） 如果需要更新渲染，则提交给 Compositor（触发渲染管线） }

渲染原理

浏览器把源码（HTML/CSS/JS）解析成 DOM + CSSOM → 构建 Render Tree → 计算样式 → 布局(layout) → 分层 → 绘制(paint) → 分块 → 光珊化（raster） → GPU 显示（draw）。

概览

从页面加载到屏幕显示，主要阶段：

1. ​网络加载资源​（HTML/CSS/JS/图片/字体等）
2. HTML 解析 → DOM 树
3. CSS 解析 → CSSOM（样式表树）
4. ​**构建 Render Tree（渲染树）**​（DOM + CSSOM 的结合，只有可见节点）
5. 样式计算（Style Recalculation）—— 将 CSS 应用到节点上
6. 布局（Layout / Reflow）—— 计算每个节点的尺寸和位置（回流）
7. 分层—— 一些特殊的属性，会创建一个新的合成层，新的图层可以使用 GPU 进行加速（流媒体）。
8. 绘制（Paint）—— 为每个节点生成绘制指令（绘制图层、颜色、边框、文本、阴影等），分发到图层，并由合并线程接管。
9. ​分块 ​​—— 对每个图层进行分块，将其划分为更多的小区域。
10. 光珊化（Rstar）—— 矢量绘制命令被 raster 线程或 GPU 转换为像素纹理（tile）。
11. 呈现到屏幕（swap buffers）

关键点：​很多步骤在主线程完成（尤其是 JS、样式、布局、paint 指令生成）——这是最常见的性能瓶颈​。浏览器尽量把可并行的工作（raster、composite、GPU）移出主线程。

详细步骤

1 资源加载与阻塞

浏览器拿到 HTML 开始​流式解析​，遇到<link rel="stylesheet">会下载并解析 CSS，因为 CSS 会影响后续节点的样式（所以 CSS 会阻塞渲染直到下载并解析）——这是“render-blocking resource”。

<script>默认会阻塞 HTML 解析（因为脚本可能会修改 DOM/CSSOM）。可以用defer（在解析结束后执行）或async（下载完成立即执行，不阻塞后续资源下载但会阻塞解析执行）来优化。

fonts、images 不一定阻塞结构渲染，但字体会影响文本重绘（FOIT/FOUT 问题）。

优化点：把非关键 CSS 异步加载，使用preload/prefetch，把脚本defer或放底部。

2 HTML → DOM

解析器（parser）按字符流构造 DOM 节点树（节点类型：元素、文本、注释等）。

DOM 是页面的语义结构。

3 CSS → CSSOM

CSS 样式表被解析成 CSSOM，包含规则、选择器、优先级。

嵌入样式和外链样式都合并成一个样式树。

4 DOM + CSSOM → Render Tree（渲染树）

渲染树只包含可见的节点（display: none 的节点不会进入）。

每个渲染对象（render object）关联计算后的样式（颜色、大小、布局属性等）。

5 样式计算（Style Recalculation）

浏览器把 CSSOM 中的样式匹配到 DOM 节点，计算出​计算后样式​（computed style）。

这是一个开销可能很大的过程，受选择器复杂度、DOM 节点数量影响。

6 布局（Layout / Reflow）

布局阶段计算每个 render object 的几何信息（宽高、位置）。

Layout 代价高，尤其是当某节点的尺寸变化需要重新计算大量子树或祖先树时（回流 cascade / reflow propagation）。

常见触发：修改宽高、添加/删除 DOM 节点、改变字体、改变视口大小等。

7 分层（Layering）

浏览器会根据某些属性，把渲染树分成若干合成层（compositing layers），常见触发：position: fixed/absolute、transform、opacity、will-change、video/canvas等。

8 绘制（Paint）

paint 会将合成层中每个节点的可视属性转换成绘制指令（例如绘制背景色、边框、文本、阴影、图像等）。

paint 的输出通常是绘制到图层（layer）或画布命令（display lists）。重复 paint 会浪费资源。

9 合成（Compositing）

合成层可以被单独 rasterize（光栅化成位图）并交给 GPU 合成，从而避免整个页面重绘。

合成阶段在合成线程/ GPU 进行，能在主线程被占用时仍保持某些动画或滚动流畅。

10 分块（Tiles）

合成线程首先对每个图层进行分块，将其划分为更多的小区域。

11 Rasterization（光栅化）

矢量绘制命令被 raster 线程或 GPU 转换为像素纹理（tile），多线程或 GPU 并行处理这些 tiles。

12 最终合成与显示（Draw）

合成线程把多个图层纹理合成（blend）出一帧，送到 GPU 显示（swap buffers）。