JS瀏覽器的首屏白屏?xí)r間計(jì)算示例詳解

更新時(shí)間：2023年11月02日 10:08:54 作者：DiracKeeko

這篇文章主要為大家介紹了JS瀏覽器的首屏白屏?xí)r間計(jì)算示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪

首屏?xí)r間白屏?xí)r間簡(jiǎn)介

首屏?xí)r間也稱用戶完全可交互時(shí)間。是整個(gè)頁面首屏完全渲染出來，用戶可以進(jìn)行完整交互所花費(fèi)的時(shí)間。該指標(biāo)值可以衡量頁面訪問速度。

白屏?xí)r間，指從用戶發(fā)出請(qǐng)求（例如在瀏覽器地址欄中輸入網(wǎng)址或點(diǎn)擊鏈接）到瀏覽器開始顯示頁面內(nèi)容之間的時(shí)間間隔。

首屏?xí)r間、白屏?xí)r間二者的計(jì)算都是計(jì)算一個(gè)時(shí)間間隔。

都需要找到選取一個(gè)開始時(shí)刻 startTime，選取一個(gè)結(jié)束時(shí)刻 endTime，計(jì)算出 endTime 和 startTime 兩者之間的差值。

這里 startTime 取 window.performance.getEntriesByType('navigation')[0].startTime，即開始記錄性能時(shí)間。

endTime 的取法有講究。

首屏?xí)r間的計(jì)算

endTime 的取值定義為 DOM 穩(wěn)定的時(shí)間點(diǎn)。

一個(gè)用 MutationObserver的實(shí)現(xiàn)思路

監(jiān)聽 DOM 變化，每次 DOM 變化都計(jì)算一個(gè)相對(duì)時(shí)間(time)和 DOM 變化的分?jǐn)?shù)，存入一個(gè) observerData 數(shù)組中。

而后處理 observerData 數(shù)組，計(jì)算 DOM 變化時(shí)分?jǐn)?shù)的差值，取 DOM 分?jǐn)?shù)變化最大的時(shí)間點(diǎn)作為首屏?xí)r間的取值點(diǎn)。

白屏?xí)r間的計(jì)算

endTime

endTime 是取瀏覽器開始渲染<body>標(biāo)簽或者解析完<head>標(biāo)簽的時(shí)刻。

那么在<head>標(biāo)簽的尾部添加一段 js 代碼：

<head>

<script type="text/javascript">

// 白屏?xí)r間結(jié)束點(diǎn)
window.firstPaint = Date.now();

</script>
</head>

firstPaint 就是白屏?xí)r間結(jié)束點(diǎn) endTime。

補(bǔ)充幾種獲取時(shí)間的方式

window.performance.timing (廢棄屬性)

window.performance.timing 是一個(gè)對(duì)象，它的各個(gè) key 對(duì)應(yīng)的 value 獲取的是以毫秒顯示的 Unix 時(shí)間戳 (Unix epoch, 從 1970 年 1 月 1 日（UTC/GMT 的午夜）開始所經(jīng)過的秒數(shù))

window.performance.timing.connectStart
< 1698805501629

new Date(window.performance.timing.connectStart)
< Wed Nov 01 2023 10:25:01 GMT+0800 (中國(guó)標(biāo)準(zhǔn)時(shí)間)

window.performance.getEntriesByType()

window.performance.getEntriesByType("key")獲取的是一個(gè)與 key 對(duì)應(yīng)的數(shù)組，數(shù)組中每個(gè)元素都是一個(gè)對(duì)象，對(duì)象中包含了 key 對(duì)應(yīng)的值。

這些值都是相對(duì)于當(dāng)前窗口的 timeOrigin 時(shí)間點(diǎn)所經(jīng)過的時(shí)間長(zhǎng)度(毫秒值)。

window.performance.timeOrigin

獲取當(dāng)前窗口的 timeOrigin 時(shí)間點(diǎn)。對(duì)一個(gè)確定的窗口，timeOrigin 的值是一個(gè)定值。

window.performance.timeOrigin
< 1698808299815.6

new Date(window.performance.timeOrigin)
< Wed Nov 01 2023 11:11:39 GMT+0800 (中國(guó)標(biāo)準(zhǔn)時(shí)間)