怎样计算首屏和白屏的时间？

最新推荐文章于 2025-06-18 10:06:14 发布

王铁柱666

最新推荐文章于 2025-06-18 10:06:14 发布

阅读量501

点赞数 4

CC 4.0 BY-SA版权

文章标签：前端 javascript 开发语言

本文链接：https://blog.youkuaiyun.com/2401_87873725/article/details/147158282

在前端开发中，计算首屏和白屏时间对于评估页面性能和用户体验至关重要。以下是计算首屏和白屏时间的详细方法：

首屏时间（First Contentful Paint，FCP）是指浏览器从响应用户输入网络地址，到首屏内容渲染完成的时间。计算首屏时间的方法主要有以下几种：

使用浏览器的Performance API：这是最直接且准确的方法。通过window.performance.timing对象，我们可以获取到页面加载过程中的各个关键时间点，包括导航开始时间（navigationStart）和首屏内容渲染结束时间。首屏时间即为这两者之差。
监听DOMContentLoaded和load事件：在某些情况下，如果无法使用Performance API，可以通过监听页面的DOMContentLoaded和load事件来近似估计首屏时间。DOMContentLoaded事件触发时，表示HTML文档已被完全加载和解析，而load事件则表示页面上的所有资源（包括图片、脚本等）都已加载完成。虽然这种方法不够精确，但可以作为一种替代方案。
自定义计时器：在页面加载开始时（例如在<head>标签内）启动一个计时器，并在首屏内容渲染完成时（例如通过检测特定DOM元素的出现）停止计时器。这种方法需要手动设置，但可以提供更灵活的控制。

白屏时间（First Paint，FP）是指浏览器从响应用户输入网址地址，到浏览器开始显示内容的时间。计算白屏时间的方法如下：

使用浏览器的Performance API：与首屏时间类似，可以通过window.performance.timing对象来获取白屏时间。具体来说，白屏时间等于页面开始展示的时间点（如responseStart或domLoading）减去开始请求的时间点（navigationStart）。
自定义计时器：在页面加载开始时启动一个计时器，并在页面开始显示内容时（例如通过检测页面背景色的变化或特定元素的渲染）停止计时器。这种方法同样需要手动设置，但可以用于更精确地测量白屏时间。