本文详解JavaScript中首屏时间与白屏时间的计算逻辑。首屏时间基于DOM稳定节点，利用MutationObserver监听变化并取分数最大点；白屏时间则通过插入JS代码标记firstPaint时刻。文章对比了废弃的timing对象与getEntriesByType、timeOrigin等现代API，提供准确的时间获取方案。
首屏时间与白屏时间概念解析
首屏时间，有时也被称为用户完全可交互时间，指的是页面首屏内容完全渲染完毕，且用户能够进行完整交互所耗费的总时长。这一指标是评估网页访问速度的重要参考标准。
白屏时间则定义为从用户发起请求（如在地址栏输入网址或点击链接）开始，直到浏览器开始在屏幕上显示页面内容为止的时间间隔。
无论是计算首屏时间还是白屏时间，核心逻辑都是计算一个特定的时间间隔。
计算过程均需确定两个关键时间点：起始时刻 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 的确定
白屏时间的 endTime 取值为浏览器开始渲染 <body> 标签，或者解析完 <head> 标签的时刻。
为了捕捉这一时刻，可以在 <head> 标签的尾部插入一段 JavaScript 代码：
<head> <!-- 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浏览器首屏白屏时间的资料请关注本站其它相关文章！