浏览器关键渲染路径（Critical Rendering Path）详解
请详细解释浏览器从接收到 HTML 到完成页面渲染的完整关键渲染路径（Critical Rendering Path），包括 DOM/CSSOM/RenderTree/Layout/Paint/Composite 各阶段。
回答
苦行僧
完整的 CRP 流程：
HTML → DOM
CSS → CSSOM
DOM + CSSOM → RenderTree（合并可见节点 + 样式）
RenderTree → Layout（计算几何位置：宽高/坐标）
→ Paint（绘制像素：颜色/边框/阴影/文本）
→ Composite（合成层：GPU 合并图层）
各阶段详解：
1. DOM 构建：
- HTML 解析器逐词法分析 Token，构建 DOM 树
- 遇到
<script>（无 async/defer）阻塞解析 - 遇
<link rel="stylesheet">不阻塞 DOM 构建（但阻塞后续脚本执行）
2. CSSOM 构建：
- CSS 解析器构建 CSSOM（层叠规则继承）
- CSS 下载和解析不阻塞 DOM 构建
- CSS 阻塞 RenderTree 构建（层叠样式树依赖完整 CSSOM）
3. RenderTree：
- DOM 树 + CSSOM 合并
- 剔除不可见节点（
display: none、<head>、<meta>） visibility: hidden节点仍在 RenderTree 中（占据空间）
4. Layout（Reflow）：
- 计算每个可见节点的几何位置（盒模型）
- 相对单位（%、vw、rem）转为绝对像素
- 影响 Layout 的属性：width/height/margin/padding/border/position/font-size
5. Paint：
- 将 RenderTree 绘制为像素（背景色、边框、文本、阴影）
- 多图层时每个图层单独绘制
- 影响 Paint 的属性：color/background/border-radius/box-shadow/outline
6. Composite：
- GPU 将多个图层合成为最终画面
transform、opacity只触发 Composite（最佳性能）will-change: transform提示浏览器提升为独立图层