当前位置: 首页 > web >正文

如何计算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 PaintFP 时间。

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 进行优化验证。

http://www.xdnf.cn/news/10798.html

相关文章:

  • llama.cpp:纯 C/C++ 实现的大语言模型推理引擎详解一
  • 快速上手pytest
  • Java求职者面试:Spring、Spring Boot、Spring MVC与MyBatis技术深度解析
  • Kerberos面试内容整理-在 Linux/Windows 中的 Kerberos 实践
  • WPS word 已有多级列表序号
  • 2025年微信小程序开发:趋势、最佳实践与AI整合
  • Linux下使用nmcli连接网络
  • win11中使用grep命令
  • 若依+vue2实现模拟登录
  • JavaSec | H2数据库注入学习
  • DeepSeek 赋能智能建筑:区块链能耗管理的破局与革新
  • go get下载三方库异常
  • 【设计模式-3.7】结构型——组合模式
  • 【208】VS2022 C++ 32位整数和unsigned char数组之间互相转换
  • 升级centos 7.9内核到 5.4.x
  • 更强劲,更高效:智源研究院开源轻量级超长视频理解模型Video-XL-2
  • ONLYOFFICE 与 LocalAI:在 Ubuntu 上搭建 AI 文档编辑环境
  • 法律大语言模型(Legal LLM)技术架构
  • 实验设计与分析(第6版,Montgomery著,傅珏生译) 第9章三水平和混合水平析因设计与分式析因设计9.5节思考题9.1 R语言解题
  • Stone 3D新版本发布,添加玩家控制和生物模拟等组件,增强路径编辑功能,优化材质编辑
  • 第3篇:数据库路由模块设计与 SQL 路由策略解析
  • 【IOS】GCD学习
  • centos中的ulimit命令
  • SpringCloud 分布式锁Redisson锁的重入性 高并发 获取锁
  • 「EN 18031」访问控制机制(ACM - 1):智能路由器的安全守卫
  • SuperMap GIS基础产品FAQ集锦(20250603)
  • 人工智能在智能教育中的创新应用与未来趋势
  • 人工智能AI之机器学习基石系列 第 3 篇:选择你的“学习方法”——初探监督学习与无监督学习
  • windows安装多个版本composer
  • 基于TI DSP控制的光伏逆变器最大功率跟踪mppt