JS浏览器的首屏白屏时间计算示例详解

更新时间：2023年11月02日 10:08:54 作者：DiracKeeko

这篇文章主要为大家介绍了JS浏览器的首屏白屏时间计算示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪

首屏时间白屏时间简介

首屏时间也称用户完全可交互时间。是整个页面首屏完全渲染出来，用户可以进行完整交互所花费的时间。该指标值可以衡量页面访问速度。

白屏时间，指从用户发出请求（例如在浏览器地址栏中输入网址或点击链接）到浏览器开始显示页面内容之间的时间间隔。

首屏时间、白屏时间二者的计算都是计算一个时间间隔。

都需要找到选取一个开始时刻 startTime，选取一个结束时刻 endTime，计算出 endTime 和 startTime 两者之间的差值。

这里 startTime 取 window.performance.getEntriesByType('navigation')[0].startTime，即开始记录性能时间。

endTime 的取法有讲究。

首屏时间的计算

endTime 的取值定义为 DOM 稳定的时间点。

一个用 MutationObserver的实现思路

监听 DOM 变化，每次 DOM 变化都计算一个相对时间(time)和 DOM 变化的分数，存入一个 observerData 数组中。

而后处理 observerData 数组，计算 DOM 变化时分数的差值，取 DOM 分数变化最大的时间点作为首屏时间的取值点。

白屏时间的计算

endTime

endTime 是取浏览器开始渲染<body>标签或者解析完<head>标签的时刻。

那么在<head>标签的尾部添加一段 js 代码：

<head>

<script type="text/javascript">

// 白屏时间结束点
window.firstPaint = Date.now();

</script>
</head>

firstPaint 就是白屏时间结束点 endTime。

补充几种获取时间的方式

window.performance.timing (废弃属性)

window.performance.timing 是一个对象，它的各个 key 对应的 value 获取的是以毫秒显示的 Unix 时间戳 (Unix epoch, 从 1970 年 1 月 1 日（UTC/GMT 的午夜）开始所经过的秒数)

window.performance.timing.connectStart
< 1698805501629

new Date(window.performance.timing.connectStart)
< Wed Nov 01 2023 10:25:01 GMT+0800 (中国标准时间)

window.performance.getEntriesByType()

window.performance.getEntriesByType("key")获取的是一个与 key 对应的数组，数组中每个元素都是一个对象，对象中包含了 key 对应的值。

这些值都是相对于当前窗口的 timeOrigin 时间点所经过的时间长度(毫秒值)。

window.performance.timeOrigin

获取当前窗口的 timeOrigin 时间点。对一个确定的窗口，timeOrigin 的值是一个定值。

window.performance.timeOrigin
< 1698808299815.6

new Date(window.performance.timeOrigin)
< Wed Nov 01 2023 11:11:39 GMT+0800 (中国标准时间)

以上就是JS浏览器的首屏白屏时间计算示例详解的详细内容，更多关于JS浏览器首屏白屏时间的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:

实用的Javascript调试技巧整理
这篇文章介绍了Javascript的调试技巧，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2022-06-06
JavaScript倒计时定时器和间隔定时器使用详解
这篇文章主要为大家介绍了JavaScript倒计时定时器和间隔定时器使用详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪<BR>
2023-05-05
JavaScript实现横版菜单栏
这篇文章主要为大家详细介绍了JavaScript实现横版菜单栏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-03-03
json 带斜杠时如何解析的实现
这篇文章主要介绍了json 带斜杠时如何解析的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-08-08
简单对比分析JavaScript中的apply,call与this的使用
简单的说call，apply都属于Function.prototype的一个方法，它是JavaScript引擎内在实现的，因为属于Function.prototype，所以每个Function对象实例(就是每个方法)都有call，apply属性。既然作为方法的属性，那它们的使用就当然是针对方法的了，这两个方法是容易混淆的
2015-12-12
浅谈发布订阅模式与观察者模式
这篇文章主要介绍了浅谈发布订阅模式与观察者模式，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2019-04-04
总结javascript中的六种迭代器
本文总结了javascript中的六种迭代器的使用实例，分别是forEach迭代器、every迭代器、some迭代器、reduce迭代器、map迭代器和fiter迭代器，有需要的小伙伴们可以参考借鉴。
2016-08-08
纯js实现重发验证码按钮倒数功能
这篇文章主要介绍了纯js实现重发验证码按钮倒数功能,本文整理了两个实现代码,需要的朋友可以参考下
2015-04-04
关于Ext中form移除textfield方法:hide(),setVisible(false)，remove()
根据条件来控制是否显示form里的textfield表单
2010-12-12
JS对象数组排序方法测试代码示例
这篇文章主要给大家介绍了关于JS对象数组排序方法测试的相关资料,在相信大家对数组排序都不陌生,在开发中我们通常会使用sort方法进行数组的排序,需要的朋友可以参考下
2024-06-06