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

2023-11-02 10:04:34 作者：DiracKeeko

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

首屏时间白屏时间简介

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

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

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

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

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

endTime 的取法有讲究。

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

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

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

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

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

<head>

<script type="text/javascript">

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

</script>
</head>

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

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("key")获取的是一个与 key 对应的数组，数组中每个元素都是一个对象，对象中包含了 key 对应的值。

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

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

window.performance.timeOrigin
< 1698808299815.6

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

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