腳本之家服務器常用軟件

快捷導航

JS瀏覽器的首屏白屏時間計算示例詳解

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

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

首屏時間白屏時間簡介

首屏時間也稱用戶完全可交互時間。是整個頁面首屏完全渲染出來，用戶可以進行完整交互所花費的時間。該指標值可以衡量頁面訪問速度。

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

首屏時間、白屏時間二者的計算都是計算一個時間間隔。

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

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

endTime 的取法有講究。

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

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

而后處理 observerData 數(shù)組，計算 DOM 變化時分數(shù)的差值，取 DOM 分數(shù)變化最大的時間點作為首屏時間的取值點。

endTime 是取瀏覽器開始渲染<body>標簽或者解析完<head>標簽的時刻。

那么在<head>標簽的尾部添加一段 js 代碼：

<head>

<script type="text/javascript">

// 白屏時間結(jié)束點
window.firstPaint = Date.now();

</script>
</head>

firstPaint 就是白屏時間結(jié)束點 endTime。

window.performance.timing 是一個對象，它的各個 key 對應的 value 獲取的是以毫秒顯示的 Unix 時間戳 (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 (中國標準時間)

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

這些值都是相對于當前窗口的 timeOrigin 時間點所經(jīng)過的時間長度(毫秒值)。

獲取當前窗口的 timeOrigin 時間點。對一個確定的窗口，timeOrigin 的值是一個定值。

window.performance.timeOrigin
< 1698808299815.6

new Date(window.performance.timeOrigin)
< Wed Nov 01 2023 11:11:39 GMT+0800 (中國標準時間)

以上就是JS瀏覽器的首屏白屏時間計算示例詳解的詳細內(nèi)容，更多關于JS瀏覽器首屏白屏時間的資料請關注腳本之家其它相關文章！

您可能感興趣的文章: