推广方案模板百度快照优化排名
计算 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 | 自动化测试 | ⭐⭐⭐⭐ |
推荐优先使用 Performance API，并结合 Lighthouse 进行优化验证。