今天說說前端性能

關于頁面相應時間，有一條著名的“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的時候可以考慮做一些預加載，把其它頁面需要用到的資源預先加載進來。

閱讀了上面的文章，不知道你有沒有get到前端頁面的性能指標分析技能。前端進階學習的道路上，除了自己閱讀參考書外，另一個好方法就是找資深的前端開發工程師交流，借助他人的經歷獲取高效的學習方法和快速進階的方式。

10月30日晚，我們邀請到了網易高級前端技術專家蔡劍飛為大家進行《前端分層之數據管理》的直播分享。對于想要成為前端開發工程師，或正在前端成長之路上打怪升級的你來說，都是一次不錯的學習機會。

關于這場直播，你需要了解…

分享人是誰？

本次直播的分享人是網易高級前端技術專家蔡劍飛。他擁有十年網易前端開發經驗，是網易杭州研究院前端框架工具、流程規范工程化方向的技術負責人。

我能學到什么？

這場分享主要分為兩個部分。

第一部分為技術專題，主要對前端分層的數據管理進行一些講解；

第二部分會針對個人的學習成長，學習如何通過解決碰到的問題來提升個人能力。

收費嗎？

不收費：） 本次直播為免費分享

如何參與直播？

掃描下方QQ群二維碼，加入直播交流群~在直播開始之前，助教MM將會放出直播地址，并揮舞小皮鞭敦促大家去聽課~

如果掃描跳轉失敗，可以直接添加群號：600918673~

網易云課堂《前端開發工程師》微專業由網易一線資深前端開發工程師團隊打造，3個月讓你掌握前端開發工程師必知必會的知識體系。通過網易真實產品案例，系統培養底層知識+技術能力+專業素養，手把手助你成為前端開發工程師。

10月25日-11月3日，《前端開發工程師》微專業正在進行課程團購活動。預付1元，可在尾款期抵扣200元，有興趣的同學歡迎戳“閱讀原文”了解活動詳情~

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的前端开发 “性能”有多重要的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。