下文基于最新 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）。
概览
从页面加载到屏幕显示，主要阶段：
- 网络加载资源（HTML/CSS/JS/图片/字体等）
- HTML 解析 → DOM 树
- CSS 解析 → CSSOM（样式表树）
- **构建 Render Tree（渲染树）**（DOM + CSSOM 的结合，只有可见节点）
- 样式计算（Style Recalculation）—— 将 CSS 应用到节点上
- 布局（Layout / Reflow）—— 计算每个节点的尺寸和位置（回流）
- 分层—— 一些特殊的属性，会创建一个新的合成层，新的图层可以使用 GPU 进行加速（流媒体）。
- 绘制（Paint）—— 为每个节点生成绘制指令（绘制图层、颜色、边框、文本、阴影等），分发到图层，并由合并线程接管。
- 分块 —— 对每个图层进行分块，将其划分为更多的小区域。
- 光珊化（Rstar）—— 矢量绘制命令被 raster 线程或 GPU 转换为像素纹理（tile）。
- 呈现到屏幕（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）。
)