HTML 关键渲染路径优化

关键渲染路径是浏览器将 HTML、CSS、JavaScript 转换为屏幕像素的过程，优化它可直接提升首屏速度。

渲染路径流程

HTML

HTML → DOM → CSSOM → Render Tree → Layout → Paint → Composite

关键步骤解析

DOM 构建

浏览器解析 HTML 字节为 tokens，构建 DOM 树。

HTML

<!-- 阻塞 DOM 构建的脚本 -->
<script src="blocking.js"></script>

<!-- 非阻塞方式 -->
<script src="non-blocking.js" async></script>

CSSOM 构建

CSS 解析为 CSSOM 树，样式表阻塞渲染。

HTML

<!-- 阻塞渲染的 CSS -->
<link rel="stylesheet" href="styles.css">

<!-- 非阻塞加载 -->
<link rel="stylesheet" href="print.css" media="print">

渲染树生成

DOM + CSSOM 合并生成渲染树，只包含可见节点。

优化策略

内联关键 CSS

HTML

<!DOCTYPE html>
<html>
<head>
  <style>
    /* 内联首屏关键样式 */
    .header { background: #fff; }
    .hero { min-height: 400px; }
  </style>
</head>
<body>
  <!-- 内容 -->

  <!-- 异步加载非关键 CSS -->
  <link rel="preload" href="styles.css" as="style" onload="this.rel='stylesheet'">
</body>
</html>

延迟非关键 JavaScript

HTML

<!-- defer: DOM 解析后执行 -->
<script src="analytics.js" defer></script>

<!-- async: 下载完立即执行 -->
<script src="ads.js" async></script>

<!-- 动态插入 -->
<script>
  window.addEventListener('load', () => {
    const script = document.createElement('script');
    script.src = 'lazy-script.js';
    document.body.appendChild(script);
  });
</script>

减少阻塞资源

JavaScript

<!-- 移除渲染阻塞 CSS -->
<link rel="stylesheet" href="styles.css" media="print" onload="this.media='all'">

<!-- 避免同步内联脚本 -->
<!-- ❌ 错误：内联脚本阻塞后续解析 -->
<script>console.log('blocking');</script>

<!-- ✅ 正确：使用 defer 或移到底部 -->

关键路径长度优化

优化点	原始	优化后
CSS 文件	10 个阻塞	1 个内联 + 9 个异步
JS 文件	5 个阻塞	0 个阻塞 + 5 个 defer
字体加载	阻塞渲染	font-display: swap

性能指标关联

text

// 监控关键渲染路径指标
const observer = new PerformanceObserver((list) => {
  list.getEntries().forEach(entry => {
    console.log('FCP:', entry.firstContentfulPaint);
    console.log('LCP:', entry.largestContentfulPaint);
  });
});
observer.observe({ type: 'paint', buffered: true });

注意事项

内联 CSS 控制在 14KB 以内，避免首次 RTT 延迟。

defer 脚本保持执行顺序，async 脚本执行顺序不确定。

字体使用 font-display: swap 避免 FOIT（不可见文字闪烁）。

避免在首屏使用 document.write，它会阻塞解析。

要点总结

内联关键 CSS 减少渲染阻塞
使用 defer/async 延迟非关键 JS
异步加载非首屏 CSS
减少关键路径资源数量
监控 FCP/LCP 指标验证优化效果

📝 发现内容有误？点击此处直接编辑