來(lái)源：https://m.sohu.com/a/201865334_509523/

關(guān)于頁(yè)面相應(yīng)時(shí)間，有一條著名的“2-5-8原則”。當(dāng)用戶訪問(wèn)一個(gè)頁(yè)面：

• 在2秒內(nèi)得到響應(yīng)時(shí)，會(huì)感覺(jué)系統(tǒng)響應(yīng)很快；
• 在2-5秒之間得到響應(yīng)時(shí)，會(huì)感覺(jué)系統(tǒng)的響應(yīng)速度還可以；
• 在5-8秒以內(nèi)得到響應(yīng)時(shí)，會(huì)感覺(jué)系統(tǒng)的響應(yīng)速度很慢，但可以接受；
• 而超過(guò)8秒后仍然無(wú)法得到響應(yīng)時(shí)，用戶會(huì)感覺(jué)系統(tǒng)糟透了，進(jìn)而選擇離開(kāi)這個(gè)站點(diǎn)，或者發(fā)起第二次請(qǐng)求。

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

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

開(kāi)始渲染時(shí)間

該時(shí)間點(diǎn)表示瀏覽器開(kāi)始繪制頁(yè)面，在此之前頁(yè)面都是白屏，所以也稱為白屏?xí)r間。

該時(shí)間點(diǎn)可用公式：
Time To Start Render = TTFB(Time To First Byte) + TTDD(Time To Document Download) + TTHE(Time To Head End)

• TTFB：表示瀏覽器發(fā)起請(qǐng)求到服務(wù)器返回第一個(gè)字節(jié)的時(shí)間；
• TTDD：表示從服務(wù)器加載HTML文檔的時(shí)間；
• TTHE：表示文檔頭部解析完成所需要的時(shí)間。

在高級(jí)瀏覽器中有對(duì)應(yīng)的屬性可以獲取該時(shí)間點(diǎn)。Chrome可通過(guò)chrome.loadTimes().firstPaintTime獲取，IE9+可以通過(guò)performance.timing.msFirstPaint獲取，在不支持的瀏覽器中可以根據(jù)上面公式通過(guò)獲取頭部資源加載完的時(shí)刻模擬獲取近似值。開(kāi)始渲染時(shí)間越快，用戶就能更快的看見(jiàn)頁(yè)面。

對(duì)于該時(shí)間點(diǎn)的優(yōu)化有：

優(yōu)化服務(wù)器響應(yīng)時(shí)間，服務(wù)器端盡早輸出

減少html文件大小

減少頭部資源,腳本盡量放在body中

DOM Ready

該時(shí)間點(diǎn)表示dom解析已經(jīng)完成，資源還沒(méi)有加載完成, 這個(gè)時(shí)候用戶與頁(yè)面的交互已經(jīng)可用了。用公式TimeTo Dom Ready = TTSR(Time To Start Render) + TTDC(Time To Dom Created) + TTST(Time To )可以表示。TTSR上面已經(jīng)介紹過(guò)了，TTDC表示DOM樹創(chuàng)建所耗時(shí)間。TTST表示BODY中所有靜態(tài)腳本加載和執(zhí)行的時(shí)間。在高級(jí)瀏覽器中有DOMContentLoaded事件對(duì)應(yīng)。

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

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

低版本webkit內(nèi)核瀏覽器可以通過(guò)輪詢document.readyState來(lái)實(shí)現(xiàn)；

ie中可通過(guò)setTimeout不斷調(diào)用documentElement的doScroll方法，直到其可用來(lái)實(shí)現(xiàn)；

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

減少dom結(jié)構(gòu)的復(fù)雜度，節(jié)點(diǎn)盡可能少，嵌套不要太深；

優(yōu)化關(guān)鍵呈現(xiàn)路徑；

首屏?xí)r間

該時(shí)間點(diǎn)表示用戶看到第一屏頁(yè)面的時(shí)間，這個(gè)時(shí)間點(diǎn)很重要但是很難獲取，一般都只能通過(guò)模擬獲取一個(gè)近似時(shí)間。一般模擬方法有：

不斷獲取屏幕截圖，當(dāng)截圖不再變化時(shí)，可以視為首屏?xí)r間。可參考webPagetest的Speed Index算法；

一般影響首屏的主要因素是圖片的加載，通過(guò)頁(yè)面加載完后判斷圖片是否在首屏內(nèi)，找出加載最慢的一張即可視為首屏?xí)r間。

針對(duì)該時(shí)間點(diǎn)的優(yōu)化有：

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

首屏外的圖片延遲加載；

首屏結(jié)構(gòu)盡量簡(jiǎn)單，首屏外的css可延遲加載；

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

該時(shí)間點(diǎn)的優(yōu)化方式有：

減少資源的請(qǐng)求數(shù)和文件大小；

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

無(wú)需同步的腳本異步加載

為了優(yōu)化整站性能，頁(yè)面的時(shí)候可以考慮做一些預(yù)加載，把其它頁(yè)面需要用到的資源預(yù)先加載進(jìn)來(lái)。

總結(jié)

以上是生活随笔為你收集整理的网站的几个性能指标和优化（简易）的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

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