首屏时间，也称用户完全可交互时间。是整个页面首屏完全渲染出来，用户可以进行完整交互所花费的时间。该指标值可以衡量页面访问速度。
白屏时间，指从用户发出请求（例如在浏览器地址栏中输入网址或点击链接）到浏览器开始显示页面内容之间的时间间隔。
首屏时间、白屏时间二者的计算都是计算一个时间间隔。
都需要找到选取一个开始时刻 startTime，选取一个结束时刻 endTime，计算出 endTime 和 startTime 两者之间的差值。
这里 startTime 取 window.performance.getEntriesByType('navigation')[0].startTime，即开始记录性能时间。
endTime 的取法有讲究。
首屏时间的计算。
endTime 的取值定义为 DOM 稳定的时间点。
一个用 MutationObserver的实现思路。
监听 DOM 变化，每次 DOM 变化都计算一个相对时间(time)和 DOM 变化的分数，存入一个 observerData 数组中。
而后处理 observerData 数组，计算 DOM 变化时分数的差值，取 DOM 分数变化最大的时间点作为首屏时间的取值点。
白屏时间的计算。
endTime 是取浏览器开始渲染<body>标签或者解析完<head>标签的时刻。
那么在<head>标签的尾部添加一段 js 代码：
<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
< 1698805501629new 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.6new Date(window.performance.timeOrigin)
< Wed Nov 01 2023 11:11:39 GMT+0800 (中国标准时间)
同步更新到自己的语雀
https://www.yuque.com/dirackeeko/blog/nfn3xneh1nbu1ikz
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。