如何计算H5页面加载时的白屏时间

news2025/6/6 13:24:31

计算 H5 页面加载时的 白屏时间（First Paint Time）是前端性能优化的重要指标，通常指从用户发起页面请求到浏览器首次渲染像素（如背景色、文字等）的时间。以下是几种常用的计算方法：

1. 使用 `Performance API`（推荐）

现代浏览器提供的 Performance API 可以精确获取页面加载的关键时间点：

// 计算白屏时间（First Paint）
const whiteScreenTime = performance.timing.responseEnd - performance.timing.navigationStart;

// 或者使用更精确的 PerformancePaintTiming（需浏览器支持）
performance.getEntriesByType('paint').forEach((entry) => {
  if (entry.name === 'first-paint') {
    console.log('白屏时间（First Paint）:', entry.startTime, 'ms');
  }
});

关键指标：

navigationStart：页面开始导航的时间。
responseEnd：浏览器接收到最后一个字节的时间。
first-paint（PerformancePaintTiming）：浏览器首次渲染非空白内容的时间。

2. 使用 `MutationObserver` 监听 DOM 变化

如果目标浏览器不支持 Performance API，可以通过监听 DOM 变化来估算白屏时间：

document.addEventListener('DOMContentLoaded', () => {
  const startTime = Date.now();
  const observer = new MutationObserver(() => {
    // 当检测到 DOM 变化时，认为页面开始渲染
    const whiteScreenTime = Date.now() - startTime;
    console.log('估算白屏时间:', whiteScreenTime, 'ms');
    observer.disconnect(); // 停止监听
  });
  observer.observe(document, { childList: true, subtree: true });
});

适用场景：
兼容性较好，但精度较低（受 JS 执行影响）。

3. 使用 `Chrome DevTools` 手动测量

打开 Chrome 开发者工具（F12）。
切换到 Performance 面板。
点击 Reload 按钮录制页面加载过程。
在结果中查找 First Paint 或 FP 时间。

4. 使用 `Lighthouse` 自动化测试

运行 Lighthouse（Chrome 内置工具）生成性能报告：

# 命令行方式（需安装 Lighthouse）
lighthouse https://example.com --view --output=json --output-path=./report.json

报告中的 First Contentful Paint (FCP) 近似白屏时间。

关键优化建议

减少关键资源（CSS/JS）体积：压缩、异步加载非必要脚本。
内联关键 CSS：避免渲染阻塞。
预加载关键资源：使用 <link rel="preload">。
服务端渲染（SSR）：加快首屏渲染。

总结

方法	适用场景	精度
`Performance API`	现代浏览器	⭐⭐⭐⭐⭐
`MutationObserver`	兼容旧浏览器	⭐⭐
`Chrome DevTools`	手动调试	⭐⭐⭐
`Lighthouse`	自动化测试	⭐⭐⭐⭐