Web 前端性能优化：关键渲染路径

Web 性能优化的核心目标是尽快将内容呈现给用户。理解关键渲染路径（Critical Rendering Path, CRP）是优化的第一步。

浏览器渲染流程

1. DOM 构建: 解析 HTML 生成 DOM 树。
2. CSSOM 构建: 解析 CSS 生成 CSSOM 树。
3. Render Tree: 结合 DOM 和 CSSOM 生成渲染树。
4. Layout (Reflow): 计算每个节点在屏幕上的位置和大小。
5. Paint: 将节点绘制到屏幕上。

优化策略

• 减少关键资源请求数: 合并 CSS/JS 文件，内联关键 CSS。
• 减少关键资源大小: 压缩代码 (Minify)，启用 Gzip/Brotli 压缩。
• 推迟非关键资源加载: 使用 async 或 defer 加载 JS，使用 media 属性加载非关键 CSS。
• 减少重排与重绘: 避免频繁操作 DOM，使用 transform 和 opacity 进行动画。

通过优化 CRP，我们可以显著降低首屏加载时间（FCP），提升用户体验。