開始之前給大家推薦兩個檢查網頁性能的地址
-
https://developers.google.com/speed/pagespeed/insights/?hl=zh-CN
-
https://www.webpagetest.org/
為什么要做性能監控
對於公司來說，性能在一定程度上與利益直接相關
為什么性能會影響公司的收益呢？根本原因還是在於性能影響了用戶體驗。加載的延遲、操作的卡頓等都會影響用戶的使用體驗。尤其是移動端，用戶對頁面響應延遲和連接中斷的容忍度很低。想象一下你拿着手機打開一個網頁想看到某個信息卻加載半天的心情，你很可能選擇直接離開換一個網頁。谷歌也將頁面加載速度作為 SEO 的一個權重
哪些點需要監控
我們可以分為以下幾個點來進行監控
-
白屏時間
-
首屏時間
-
用戶可操作時間
-
總下載時間
白屏時間
白屏時間是用戶首次看到內容的時間，也叫做首次渲染時間，chrome 高版本有 firstPaintTime 接口來獲取這個耗時，但大部分瀏覽器並不支持，必須想其他辦法來監測。仔細觀察 WebPagetest 視圖分析發現，白屏時間出現在頭部外鏈資源加載完附近，因為瀏覽器只有加載並解析完頭部資源才會真正渲染頁面。基於此我們可以通過獲取頭部資源加載完的時刻來近似統計白屏時間
代碼理解
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script> var start_time = +new Date; //測試時間起點，實際統計起點為 </script> </head> <body> <script src="js"></script> <script> var end_time = +new Date; //時間終點 var headtime = end_time - start_time; //頭部資源加載時間 console.log(headtime); </script> </body>
首屏時間
首屏時間的統計比較復雜，因為涉及圖片等多種元素及異步渲染等方式。觀察加載視圖可發現，影響首屏的主要因素的圖片的加載。通過統計首屏內圖片的加載時間便可以獲取首屏渲染完成的時間。統計流程如下
首屏位置調用API 開始統計->
綁定首屏內所有圖片的 load 事件->
頁面加載完后判斷圖片是否在首屏內，找出加載最慢的一張->
首屏時間
可操作時間
用戶可操作默認可以統計domready時間，因為通常會在這時候綁定事件操作。對於使用了模塊化異步加載的 JS 可以在代碼中去主動標記重要 JS 的加載時間，這也是產品指標的統計方式
總下載時間
總下載時間默認可以統計onload時間，這樣可以統計同步加載的資源全部加載完的耗時。如果頁面中存在很多異步渲染，可以將異步渲染全部完成的時間作為總下載時間
總結
-
白屏時間指head內資源加載完成
-
首屏時間指可視區域內最后一張圖片加載完成的時間
-
可操作時間指Document.onready時間
-
總下載時間指Document.onload時間