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

计算 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 手动测量

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

---

4. 使用 Lighthouse 自动化测试

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

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

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

---

关键优化建议

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

---

总结

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

推荐优先使用 Performance API，并结合 Lighthouse 进行优化验证。