首屏和白屏时间计算

首先明确，首屏和白屏的时间计算，没有明确的API可以得到。

白屏 = 开始显示body的时间 - 开始请求的时间

首屏 = 首屏内容渲染结束的时间 - 开始请求的时间

具体计算方法如下：

1. 白屏

支持performance api，开始请求的时间 performance.timing.navigationStart

复制代码
<html>
    <head>
        <title>白屏时间</title>
        <link href="xxxxx"/>
        <script>var endTime = new Date() </script>
    </head>    
    <body>    
    </body>
</html>
复制代码

白屏 = endTime - performance.timing.navigationStart

不支持performance api，只能采用打点的方式，在dom中插入 <script> startTime = Date.now(); </script>

复制代码
<html>
    <head>
        <script> var startTime = new Date() </script>       
        <title>白屏时间</title>
        <link href="xxxxx"/>
        <link href="xxxxx"/>
        <script> var endTime = new Date() </script>    
    </head>    
    <body></body>
</html>
复制代码

白屏 = endTime - startTime

2. 首屏

首屏是指，在不滚动屏幕前提下，第一屏页面显示完成花费的时间。页面内容显示完成，才算首屏时间，部分未显示，不算。首屏时间一般在5秒内，算优秀，在10秒内可接受，超过10秒，无法忍受。

首屏渲染结束这个时间，无法确切的计算。一般可以在几个近似的地方打点：

1. 首屏dom和第二屏dom之间 打点 不同屏幕尺寸，有差异，模糊计算
2. 首屏图片中最慢的加载完成 打点 监听所有首屏的图片，在onload事件中，记录时间最大值
3. 在domReady或onload中 打点

posted @   全玉  阅读(1389)  评论(0)  编辑  收藏  举报
编辑推荐：
· SQL Server 2025 AI相关能力初探
· Linux系列：如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
阅读排行：
· 阿里最新开源QwQ-32B，效果媲美deepseek-r1满血版，部署成本又又又降低了！
· Manus重磅发布：全球首款通用AI代理技术深度解析与实战指南
· 开源Multi-agent AI智能体框架aevatar.ai，欢迎大家贡献代码
· 被坑几百块钱后，我竟然真的恢复了删除的微信聊天记录！
· AI技术革命，工作效率10个最佳AI工具
历史上的今天：
2018-05-21 判断元素是否在视口和元素相交
2017-05-21 单链表的节点数,合并,相交,反转
2017-05-21 双向链表
2017-05-21 单链表的删除
点击右上角即可分享
微信分享提示
AI IDE Trae