关键渲染路径优化原则

作者：陈川阅读数：53975人阅读分类：性能优化

关键渲染路径的概念

关键渲染路径（Critical Rendering Path, CRP）是浏览器将HTML、CSS和JavaScript转换为屏幕上实际像素的一系列步骤。优化关键渲染路径可以显著提升页面加载速度，改善用户体验。浏览器渲染页面的过程主要包括以下几个阶段：

构建DOM树：解析HTML文档，构建文档对象模型（DOM）
构建CSSOM树：解析CSS样式表，构建CSS对象模型（CSSOM）
构建渲染树：将DOM和CSSOM合并形成渲染树
布局（Layout）：计算每个渲染对象的几何信息
绘制（Paint）：将渲染树转换为屏幕上的实际像素

优化DOM构建

DOM构建是渲染路径的第一步，优化DOM结构可以加快解析速度：

<!-- 不推荐的写法 -->
<div>
  <div>
    <div>
      <p>多层嵌套结构</p>
    </div>
  </div>
</div>

<!-- 推荐的扁平化结构 -->
<div>
  <p>扁平化结构更易解析</p>
</div>

优化建议：

减少DOM节点数量
避免深层嵌套
使用语义化标签
删除不必要的注释和空白字符

优化CSSOM构建

CSSOM构建会阻塞渲染，优化CSS加载至关重要：

/* 避免使用@import，它会增加关键路径的往返次数 */
@import url('styles.css');

/* 推荐使用link标签加载CSS */
<link rel="stylesheet" href="styles.css">

优化策略：

将关键CSS内联到HTML中

媒体查询优化：

<link rel="stylesheet" href="print.css" media="print">
<link rel="stylesheet" href="mobile.css" media="(max-width: 600px)">

避免使用CSS表达式
精简CSS选择器复杂度

JavaScript加载优化

JavaScript会阻塞DOM构建，需要特别注意加载方式：

// 默认的脚本加载会阻塞解析
<script src="script.js"></script>

// 使用async属性异步加载
<script async src="script.js"></script>

// 使用defer属性延迟执行
<script defer src="script.js"></script>

最佳实践：

将脚本放在body底部
使用async/defer属性
避免document.write
使用requestIdleCallback处理非关键任务

预加载关键资源

使用资源提示可以提前获取关键资源：

<!-- 预加载关键资源 -->
<link rel="preload" href="critical.css" as="style">
<link rel="preload" href="main.js" as="script">

<!-- DNS预解析 -->
<link rel="dns-prefetch" href="//cdn.example.com">

<!-- 预连接 -->
<link rel="preconnect" href="https://api.example.com">

优化字体加载

字体文件可能导致文本渲染延迟：

/* 使用font-display控制字体显示行为 */
@font-face {
  font-family: 'MyFont';
  src: url('myfont.woff2') format('woff2');
  font-display: swap;
}

字体优化技巧：

使用WOFF2格式
子集化字体文件
预加载字体资源
设置适当的font-display策略

减少重排和重绘

布局和绘制是渲染路径的最后阶段，需要优化：

// 不好的做法：多次触发重排
const element = document.getElementById('animate');
element.style.width = '100px';
element.style.height = '200px';
element.style.left = '10px';

// 好的做法：使用CSS类或requestAnimationFrame
element.classList.add('animate');
// 或
requestAnimationFrame(() => {
  element.style.transform = 'translateX(100px)';
});

优化建议：

使用transform和opacity实现动画
避免频繁操作样式
使用虚拟DOM库
批量DOM操作

服务端渲染优化

服务端渲染可以缩短关键渲染路径：

// Node.js服务端渲染示例
const express = require('express');
const React = require('react');
const ReactDOMServer = require('react-dom/server');

const app = express();

app.get('/', (req, res) => {
  const html = ReactDOMServer.renderToString(<App />);
  res.send(`
    <!DOCTYPE html>
    <html>
      <head>
        <title>SSR Example</title>
      </head>
      <body>
        <div id="root">${html}</div>
        <script src="client.js"></script>
      </body>
    </html>
  `);
});

SSR优化要点：

流式传输HTML
预加载客户端资源
状态序列化
代码分割

性能监测工具

使用工具测量和优化关键渲染路径：

// 使用Performance API测量关键时间点
window.addEventListener('load', () => {
  const timing = performance.timing;
  console.log('DOM加载完成时间:', timing.domComplete - timing.navigationStart);
  console.log('首字节时间:', timing.responseStart - timing.navigationStart);
});

常用工具：

Chrome DevTools Performance面板
Lighthouse
WebPageTest
SpeedCurve

移动端优化策略

移动设备需要特别考虑：

<!-- 设置视口 -->
<meta name="viewport" content="width=device-width, initial-scale=1">

<!-- 避免300ms点击延迟 -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

移动优化技巧：

按需加载图片
使用响应式图片
优化触摸事件
考虑数据流量限制

缓存策略优化

合理利用缓存减少网络请求：

# 示例缓存头
Cache-Control: public, max-age=31536000, immutable
ETag: "xyz123"
Last-Modified: Wed, 21 Oct 2020 07:28:00 GMT

缓存策略：

长期缓存静态资源
使用Service Worker
版本化资源URL
合理设置缓存头

图片优化技术

图片通常是页面中最大的资源：

<!-- 响应式图片示例 -->
<picture>
  <source media="(min-width: 800px)" srcset="large.jpg">
  <source media="(min-width: 400px)" srcset="medium.jpg">
  <img src="small.jpg" alt="响应式图片">
</picture>

图片优化方法：

选择合适的格式（WebP/AVIF）
懒加载图片
使用srcset和sizes
渐进式JPEG
图片压缩

代码分割与懒加载

减少初始加载的代码量：

// 动态导入实现代码分割
button.addEventListener('click', async () => {
  const module = await import('./module.js');
  module.doSomething();
});

// React懒加载组件
const LazyComponent = React.lazy(() => import('./LazyComponent'));

实现方式：

路由级代码分割
组件级懒加载
Webpack splitChunks
预取非关键资源

HTTP/2优化

利用HTTP/2特性提升性能：

# Nginx启用HTTP/2
server {
  listen 443 ssl http2;
  server_name example.com;
  ...
}

HTTP/2优化点：

多路复用
服务器推送
头部压缩
优先级控制

渲染性能预算

建立性能预算确保优化效果：

// 性能预算示例
{
  "budgets": [
    {
      "resourceType": "document",
      "budget": 18
    },
    {
      "resourceType": "script",
      "budget": 120
    },
    {
      "resourceType": "image",
      "budget": 300
    }
  ]
}

预算指标：