web前端必須關注的4個性能指標

 

 關於頁面相應時間，有一條著名的「2-5-8原則」。當用戶訪問一個頁面：

 

• 在2秒內獲得響應時，會感受系統響應很快；

• 在2-5秒之間獲得響應時，會感受系統的響應速度還能夠；

• 在5-8秒之內獲得響應時，會感受系統的響應速度很慢，但能夠接受；

• 而超過8秒後仍然沒法獲得響應時，用戶會感受系統糟透了，進而選擇離開這個站點，或者發起第二次請求。

   

 

對於一個網站若是但願抓住用戶，網站的速度以及穩定性是很是重要的。

 

從各式各樣的前端監控平臺中，你均可以得到頁面不少的性能指標。本文將介紹幾個幾個比較關鍵的指標，並給出相應的優化思路。

 

開始渲染時間

 

該時間點表示瀏覽器開始繪製頁面，在此以前頁面都是白屏，因此也稱爲白屏時間。

 

該時間點可用公式Time To Start Render = TTFB（Time To First Byte） + TTDD（Time To Document Download） + TTHE（Time To Head End）表示。其中TTFB表示瀏覽器發起請求到服務器返回第一個字節的時間，TTDD表示從服務器加載HTML文檔的時間，TTHE表示文檔頭部解析完成所須要的時間。在高級瀏覽器中有對應的屬性能夠獲取該時間點。Chrome可經過chrome.loadTimes().firstPaintTime獲取，IE9+能夠經過performance.timing.msFirstPaint獲取，在不支持的瀏覽器中能夠根據上面公式經過獲取頭部資源加載完的時刻模擬獲取近似值。開始渲染時間越快，用戶就能更快的看見頁面。

 

對於該時間點的優化有：

 

1)優化服務器響應時間，服務器端儘早輸出

2)減小html文件大小

3)減小頭部資源,腳本儘可能放在body中

 

DOM Ready

 

該時間點表示dom解析已經完成，資源尚未加載完成, 這個時候用戶與頁面的交互已經可用了。用公式TimeTo Dom Ready = TTSR(Time To Start Render) + TTDC(Time To Dom Created) + TTST(Time To Script)能夠表示。TTSR上面已經介紹過了，TTDC表示DOM樹建立所耗時間。TTST表示BODY中全部靜態腳本加載和執行的時間。在高級瀏覽器中有DOMContentLoaded事件對應。

 

詳細規範能夠查看W3C的HTML5規範。從MDN文檔上能夠看出該事件主要是指dom文檔加載解析完成，看上去很簡單，可是DOMContentLoaded事件的觸發與css,js息息相關，如今有專門的名詞Critical Rendering Path(關鍵呈現路徑)來描述。

 

在不支持DOMContentLoaded事件的瀏覽器中能夠經過模擬獲取近似值，主要的模擬方法有：

 

1）低版本webkit內核瀏覽器能夠經過輪詢document.readyState來實現

2）ie中可經過setTimeout不斷調用documentElement的doScroll方法，直到其可用來實現

 

具體實現方法能夠參考主流框架(jquery等)的實現。 DOM Ready時間點意味着用戶與頁面能夠進行交互了，所以越早越好，對於該時間點的優化有：

 

1）減小dom結構的複雜度，節點儘量少，嵌套不要太深

2）優化關鍵呈現路徑

首屏時間

 

該時間點表示用戶看到第一屏頁面的時間，這個時間點很重要可是很難獲取，通常都只能經過模擬獲取一個近似時間。通常模擬方法有：

 

1）不斷獲取屏幕截圖，當截圖再也不變化時，能夠視爲首屏時間。可參考webPagetest的Speed Index算法；

2）通常影響首屏的主要因素是圖片的加載，經過頁面加載完後判斷圖片是否在首屏內，找出加載最慢的一張便可視爲首屏時間。固然還需考慮其餘細節，具體可參考【7天打造前端性能監控系統】

 

針對該時間點的優化有：

 

1）頁面首屏的顯示儘可能不要依賴於js代碼，js儘可能放到domReady後執行或加載

2）首屏外的圖片延遲加載

3）首屏結構儘可能簡單，首屏外的css可延遲加載

 

onload

 

該時間點是window.onload事件觸發的時間，表示原始文檔和全部引用的內容已經加載完成，用戶最明顯的感受就是瀏覽器tab上loading狀態結束。

 

該時間點的優化方式有：

 

1）減小資源的請求數和文件大小

2）將非初始化腳本放到onLoad以後執行

3）無需同步的腳本異步加載

 

爲了優化整站性能，頁面onload的時候能夠考慮作一些預加載，把其它頁面須要用到的資源預先加載進來。 web前端學習資料，免費領取，加羣434623999