身為前端開發工程師一定要注意三點的效能指標

身為一個合格的前端開發工程師，你需要關注的幾個效能指標你知道嗎？今天就好好的跟大家介紹一下，身為前端工程師你必須注意指標有哪三點

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

在2秒內得到回應時，會感覺系統反應很快；

#在2-5秒之間得到回應時，會感覺到系統的反應速度還可以;

在5-8秒內得到回應時，會感覺系統的反應速度很慢，但可以接受;

而超過8秒後仍然無法得到回應時，用戶會感覺系統糟透了，進而選擇離開這個站點，或是發起第二次請求。

 

對於一個網站如果希望抓住用戶，網站的速度以及穩定性是首當其衝的。

 

從各式各樣的前端監控平台中，你都可以得到頁面很多的效能指標。本文將介紹幾個幾個比較關鍵的指標，並給予對應的最佳化想法。

2.開始渲染時間

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

此時間點可用公式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事件對應，MDN上有關DOMContentLoaded事件描述的文檔如下，

The DOMContentLoaded event is fired when the document has been completely loaded and parsed, without waing fordocument has been completely loaded and parsed, without waing for stylesheets, images, and subframes to finish loading (the load event can be used to detect a fully-loaded page).

詳細規格可以查看W3C的HTML5規格。從MDN文件上可以看出該事件主要是指dom文件載入解析完成，看上去很簡單，但是DOMContentLoaded事件的觸發與css,js息息相關，現在有專門的名詞Critical Rendering Path(關鍵呈現路徑)來描述，在文章【關鍵呈現路徑】中詳細介紹了關鍵呈現路徑對DOMContentLoaded的影響。

在不支援DOMContentLoaded事件的瀏覽器中可以透過模擬取得近似值，主要的類比方法有：

1）低版本webkit核心瀏覽器可以透過輪詢document. readyState來實作

2）ie中可透過setTimeout不斷呼叫documentElement的doScroll方法，直到其可用於實作

具體實作方法可以參考主流框架(jquery等)的實作。 DOM Ready時間點意味著使用者與頁面可以互動了，因此越早越好，對於該時間點的最佳化有：

1）減少dom結構的複雜度，節點盡可能少，嵌套不要太深

2）優化關鍵呈現路徑

3.首屏時間

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

1）不斷取得螢幕截圖，當截圖不再變化時，可以視為首屏時間。可參考webPagetest的Speed Index演算法；

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

針對該時間點的優化有：

1）頁面首屏的顯示盡量不要依賴於js程式碼，js盡量放到domReady後執行或載入

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

3）首屏結構盡量簡單，首屏外的css可延遲載入

onload

該時間點是window.onload事件觸發的時間，表示原始文件和所有引用的內容已經載入完成，使用者最明顯的感覺就是瀏覽器tab上loading狀態結束。

該時間點的最佳化方式有：

1）減少資源的請求數和檔案大小

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

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

為了優化整站性能，頁面onload的時候可以考慮做一些預加載，把其它頁面需要用到的資源預先加載進來。

希望閱讀了上面的文章，對您的前端開發道路上有所幫助。

相關閱讀：

前端JS面試題

#實用web前端JS與UI框架簡介

web前端知識體系總結

#

以上是身為前端開發工程師一定要注意三點的效能指標的詳細內容。更多資訊請關注PHP中文網其他相關文章！