渲染与关键路径
关键渲染路径（CRP）：从收到 HTML/CSS/JS 到屏幕上呈现像素的主路径——DOM / CSSOM → 渲染树 → 布局 → 绘制。围绕 关键路径、阻塞渲染、重排重绘、脚本加载策略 与首屏相关的 异步资源策略 展开。
1. 浏览器渲染主流程（简述）
- 解析 HTML → DOM
- 解析 CSS → CSSOM（外链 CSS 默认阻塞渲染）
- 合并 → 渲染树（仅可见节点）
- 布局（重排）：几何信息与占位
- 绘制（重绘）：像素输出
任何拉长上述阶段的步骤，都会推迟 首次可见内容。
2. 阻塞渲染的常见因素
| 因素 | 说明 |
|---|---|
同步 JS（默认 <script>） | 下载并执行会阻塞 HTML 解析 |
| 大型外链 CSS | 阻塞渲染树构建 |
| 布局抖动 | 连续读写 layout 属性迫使浏览器同步布局 |
脚本加载策略：
defer：并行下载，HTML 解析完成后按序执行，适合依赖 DOM 的业务脚本。async：并行下载，下载完立刻执行，顺序不保证，适合独立脚本（如统计）。- 默认：阻塞解析，尽量减小体积或后移。
3. 减少重排与重绘
- 批量读写：先读后写，避免交替触发强制同步布局。
- 改动样式：优先
class切换，避免逐属性触碰样式引发多次计算。 - 动画：优先
transform/opacity（往往可走合成层），慎用触发布局的属性。 will-change：谨慎提示浏览器预备优化，勿滥用以免内存上升。
4. 首屏与「非关键」资源
- 关键 CSS：首屏所需样式尽量内联或优先加载；其余可延后。
- 非关键 JS：延后执行或拆分路由级加载。
- 图片：指定宽高或占位，减轻 CLS（见 04 与 07）。
5. 与 SSR / 预渲染的关系
SSR、SSG、预渲染是在 服务端提前产出 HTML，缩短「白屏等待客户端拼页面」的时间；代价是服务端与缓存策略复杂度。适合内容与 SEO 敏感场景，详见架构文档中的 SSR 专题。
小结
渲染优化核心：少阻塞、少布局抖动、让首屏必要资源更早就绪。配合 Performance 面板看 Main 线程长任务与 Rendering 标记。