今天說說前端性能

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

在2秒內得到響應時，會感覺系統(tǒng)響應很快；

在2-5秒之間得到響應時，會感覺系統(tǒng)的響應速度還可以；

在5-8秒以內得到響應時，會感覺系統(tǒng)的響應速度很慢，但可以接受；

而超過8秒后仍然無法得到響應時，用戶會感覺系統(tǒng)糟透了，進而選擇離開這個站點，或者發(fā)起第二次請求。

?

對于一個網(wǎng)站如果希望抓住用戶，網(wǎng)站的速度以及穩(wěn)定性是非常重要的。

?

從各式各樣的前端監(jiān)控平臺中，你都可以獲得頁面很多的性能指標。本文將介紹幾個幾個比較關鍵的指標，并給出相應的優(yōu)化思路。

開始渲染時間

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

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

對于該時間點的優(yōu)化有：

1)優(yōu)化服務器響應時間，服務器端盡早輸出

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樹創(chuàng)建所耗時間。TTST表示BODY中所有靜態(tài)腳本加載和執(zhí)行的時間。在高級瀏覽器中有DOMContentLoaded事件對應。

詳細規(guī)范可以查看W3C的HTML5規(guī)范。從MDN文檔上可以看出該事件主要是指dom文檔加載解析完成，看上去很簡單，但是DOMContentLoaded事件的觸發(fā)與css,js息息相關，現(xiàn)在有專門的名詞Critical Rendering Path(關鍵呈現(xiàn)路徑)來描述。

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

1）低版本webkit內核瀏覽器可以通過輪詢document.readyState來實現(xiàn)

2）ie中可通過setTimeout不斷調用documentElement的doScroll方法，直到其可用來實現(xiàn)

具體實現(xiàn)方法可以參考主流框架(jquery等)的實現(xiàn)。 DOM Ready時間點意味著用戶與頁面可以進行交互了，因此越早越好，對于該時間點的優(yōu)化有：

1）減少dom結構的復雜度，節(jié)點盡可能少，嵌套不要太深

2）優(yōu)化關鍵呈現(xiàn)路徑

首屏時間

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

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

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

針對該時間點的優(yōu)化有：

1）頁面首屏的顯示盡量不要依賴于js代碼，js盡量放到domReady后執(zhí)行或加載

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

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

onload

該時間點是window.onload事件觸發(fā)的時間，表示原始文檔和所有引用的內容已經加載完成，用戶最明顯的感覺就是瀏覽器tab上loading狀態(tài)結束。?

該時間點的優(yōu)化方式有：

1）減少資源的請求數(shù)和文件大小

2）將非初始化腳本放到onLoad之后執(zhí)行

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

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

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

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

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

分享人是誰？

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

我能學到什么？

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

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

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

收費嗎？

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

如何參與直播？

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

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

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

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

創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎勵來咯，堅持創(chuàng)作打卡瓜分現(xiàn)金大獎

總結

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

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