白屏時間
白屏時間指的是瀏覽器開始顯示內容的時間。因此我們只需要知道是瀏覽器開始顯示內容的時間點，即頁面白屏結束時間點即可獲取到頁面的白屏時間。
計算白屏時間
因此，我們通常認為瀏覽器開始渲染 <body> 標簽或者解析完 <head> 標簽的時刻就是頁面白屏結束的時間點。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>白屏</title> <script type="text/javascript"> // 不兼容performance.timing 的瀏覽器，如IE8 window.pageStartTime = Date.now(); </script> <!-- 頁面 CSS 資源 --> <link rel="stylesheet" href="common.css"> <link rel="stylesheet" href="page.css"> <script type="text/javascript"> // 白屏時間結束點 window.firstPaint = Date.now(); </script> </head> <body> <!-- 頁面內容 --> </body> </html>
因此白屏時間則可以這樣計算出：
可使用 Performance API 時
白屏時間 = firstPaint - performance.timing.navigationStart;
不可使用 Performance API 時
白屏時間 = firstPaint - pageStartTime;
首屏時間
首屏時間是指用戶打開網站開始，到瀏覽器首屏內容渲染完成的時間。對於用戶體驗來說，首屏時間是用戶對一個網站的重要體驗因素。通常一個網站，如果首屏時間在5秒以內是比較優秀的，10秒以內是可以接受的，10秒以上就不可容忍了。超過10秒的首屏時間用戶會選擇刷新頁面或立刻離開。
通常計算首屏的方法有
- 首屏模塊標簽標記法
- 統計首屏內加載最慢的圖片的時間
- 自定義首屏內容計算法
1、首屏模塊標簽標記法
首屏模塊標簽標記法，通常適用於首屏內容不需要通過拉取數據才能生存以及頁面不考慮圖片等資源加載的情況。我們會在 HTML 文檔中對應首屏內容的標簽結束位置，使用內聯的 JavaScript 代碼記錄當前時間戳。如下所示：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>首屏</title> <script type="text/javascript"> window.pageStartTime = Date.now(); </script> <link rel="stylesheet" href="common.css"> <link rel="stylesheet" href="page.css"> </head> <body> <!-- 首屏可見模塊1 --> <div class="module-1"></div> <!-- 首屏可見模塊2 --> <div class="module-2"></div> <script type="text/javascript"> window.firstScreen = Date.now(); </script> <!-- 首屏不可見模塊3 --> <div class="module-3"></div> <!-- 首屏不可見模塊4 --> <div class="module-4"></div> </body> </html>
此時首屏時間等於 firstScreen - performance.timing.navigationStart;
事實上首屏模塊標簽標記法 在業務中的情況比較少，大多數頁面都需要通過接口拉取數據才能完整展示，因此我們會使用 JavaScript 腳本來判斷首屏頁面內容加載情況。
2、統計首屏內圖片完成加載的時間
通常我們首屏內容加載最慢的就是圖片資源，因此我們會把首屏內加載最慢的圖片的時間當做首屏的時間。
由於瀏覽器對每個頁面的 TCP 連接數有限制，使得並不是所有圖片都能立刻開始下載和顯示。因此我們在 DOM樹 構建完成后將會去遍歷首屏內的所有圖片標簽，並且監聽所有圖片標簽 onload 事件，最終遍歷圖片標簽的加載時間的最大值，並用這個最大值減去 navigationStart 即可獲得近似的首屏時間。
此時首屏時間等於 加載最慢的圖片的時間點 - performance.timing.navigationStart;
3、自定義模塊內容計算法
由於統計首屏內圖片完成加載的時間比較復雜。因此我們在業務中通常會通過自定義模塊內容，來簡化計算首屏時間。如下面的做法：
- 忽略圖片等資源加載情況，只考慮頁面主要 DOM
- 只考慮首屏的主要模塊，而不是嚴格意義首屏線以上的所有內容