前言

利用LightHouse進行合理的頁面性能優(yōu)化 這篇文章主要講解了如何使用Lighthouse。 這里把相關(guān)圖片再展示一下：

我們可以看到Lighthouse計算的時候，會根據(jù)這幾個維度的指標(biāo)來計算總分。那么本篇文章，就主要講解下前端性能監(jiān)控相關(guān)的重要指標(biāo)含義和計算方式。

一. 性能指標(biāo)介紹

在介紹指標(biāo)之前，我們首先應(yīng)當(dāng)知道這些數(shù)據(jù)可以從哪里獲取。JS里面，有一個 performance 對象，它是專門用來用于性能監(jiān)控的對象，內(nèi)置了一些前端需要的性能參數(shù)。

我們隨便打開一個瀏覽器，在終端控制臺輸入以下內(nèi)容：

performance.getEntriesByType('navigation')

如圖：

1.1 單一指標(biāo)介紹

1. navigationStart：導(dǎo)航開始的時間，即瀏覽器開始獲取頁面的時間。
2. redirectCount：重定向次數(shù)，表示在導(dǎo)航過程中發(fā)生的重定向次數(shù)。
3. type：導(dǎo)航類型，可能的取值有：
   • navigate：常規(guī)導(dǎo)航，例如用戶點擊鏈接或輸入URL進行的導(dǎo)航。
   • reload：頁面重新加載。
   • back_forward：通過瀏覽器的前進或后退按鈕導(dǎo)航。
4. unloadEventStart：前一個頁面的unload事件開始的時間。
5. unloadEventEnd：前一個頁面的unload事件結(jié)束的時間。
6. redirectStart：重定向開始的時間。
7. redirectEnd：重定向結(jié)束的時間。
8. fetchStart：瀏覽器開始獲取頁面資源的時間。
9. domainLookupStart：域名解析開始的時間。
10. domainLookupEnd：域名解析結(jié)束的時間。
11. connectStart：建立與服務(wù)器連接開始的時間。
12. connectEnd：建立與服務(wù)器連接結(jié)束的時間。
13. secureConnectionStart：安全連接開始的時間，如果不是安全連接，則該值為0。
14. requestStart：向服務(wù)器發(fā)送請求的時間。
15. responseStart：接收到服務(wù)器響應(yīng)的時間。
16. responseEnd：接收到服務(wù)器響應(yīng)并且所有資源都已接收完成的時間。
17. domLoading：開始解析文檔的時間。
18. domInteractive：文檔解析完成并且所有子資源（例如圖片、樣式表等）也已加載完成的時間。
19. domContentLoadedEventStart：DOMContentLoaded事件開始的時間，表示HTML文檔解析完成并且所有腳本文件已下載完成。
20. domContentLoadedEventEnd：DOMContentLoaded事件結(jié)束的時間，表示所有腳本文件已執(zhí)行完成。
21. domComplete：文檔和所有子資源（例如圖片、樣式表等）都已完成加載的時間。
22. loadEventStart：load事件開始的時間，表示所有資源（包括圖片、樣式表、腳本文件等）都已加載完成。
23. loadEventEnd：load事件結(jié)束的時間，表示所有資源（包括圖片、樣式表、腳本文件等）都已執(zhí)行完成。

1.2 指標(biāo)計算

我們看下圖

我們從上圖出發(fā)，分別對各個階段進行計算，我們說下幾個比較重要的階段，按照從左往右的順序。

① Redirect(重定向耗時)

表示從重定向開始（redirectStart）到重定向結(jié)束的時間（redirectEnd）的時間間隔，它反映了瀏覽器在這段時間內(nèi)完成了重定向的過程：

const redirectTime = redirectEnd - redirectStart

② AppCache(應(yīng)用程序緩存的DNS解析)

這一部分也是在進行DNS解析，在使用AppCache（應(yīng)用程序緩存）的情況下，瀏覽器會在加載頁面時檢查緩存中是否存在相應(yīng)的資源，并根據(jù)需要更新緩存：

const appcacheTime = domainLookupStart - fetchStart

③ DNS(DNS解析耗時)

DNS解析耗時：在瀏覽器加載網(wǎng)頁時，當(dāng)需要與服務(wù)器建立連接時，瀏覽器會首先進行DNS解析，將域名轉(zhuǎn)換為對應(yīng)的IP地址。DNS解析的過程包括向DNS服務(wù)器發(fā)送查詢請求、等待DNS服務(wù)器響應(yīng)以及獲取到IP地址。

dns = domainLookupEnd - domainLookupStart

④ TCP(TCP連接耗時)

TCP連接耗時：在瀏覽器加載網(wǎng)頁時，當(dāng)瀏覽器需要與服務(wù)器建立連接時，它會向服務(wù)器發(fā)送請求，并等待服務(wù)器響應(yīng)。建立連接的過程包括TCP握手、SSL握手等。

tcp = connectEnd - connectStart

其中還有建立SSL連接的時間，包括在TCP耗時里面。

ssl = connectEnd - secureConnectionStart

⑤ TTFB(請求響應(yīng)耗時)

請求耗時：從發(fā)送請求到接收到服務(wù)器響應(yīng)的第一個字節(jié)所花費的時間。

ttfb = responseStart - requestStart

⑥ Trans(內(nèi)容傳輸耗時)

當(dāng)瀏覽器發(fā)送請求后，服務(wù)器會返回相應(yīng)的響應(yīng)，這個差值就是衡量瀏覽器接收服務(wù)器響應(yīng)的耗時。

trans = responseEnd - responseStart

⑦ DOM(DOM解析耗時)

DOM這一塊比較復(fù)雜，實際上還能分成3個小DOM階段。

1. 階段一（注意，上圖中并沒有顯式地展示出來）：解析DOM階段。

const dom1 = domInteractive - responseEnd

2. 階段二：文檔解析完成，html、js解析完成，css、圖片加載完成。即加載DOM階段。

const dom2 = domComplete-domInteractive

3. 階段二當(dāng)中還可以分出一小個階段：代表從開始加載DOM內(nèi)容到DOM內(nèi)容加載完成的時間間隔。

const domLoaded = domContentLoadedEventEnd - domContentLoadedEventStart

1.3 FP(first-paint) 和 FCP(first-contentful-paint)

FP（first-paint）和FCP（first-contentful-paint）

FP指的是瀏覽器首次將像素渲染到屏幕上的時間點，即頁面開始渲染的時間點。通常情況下，FP是指瀏覽器首次繪制任何可見的內(nèi)容，包括背景色、文字、圖片等，但不包括用戶界面的控件，比如滾動條、按鈕等。

FCP指的是瀏覽器首次將頁面的有意義的內(nèi)容渲染到屏幕上的時間點，即頁面開始呈現(xiàn)有意義的內(nèi)容的時間點。有意義的內(nèi)容可以是文本、圖片、視頻等，但不包括背景色、邊框等無意義的內(nèi)容。

一般情況下，兩者基本上沒有什么區(qū)別，來說下兩者的獲取方式：

const fp = performance.getEntriesByName('first-paint')[0].startTime
const fcp = performance.getEntriesByName('first-contentful-paint')[0].startTime

后面我們都只說FCP。

1.4 LCP(Largest Contentful Paint)

LCP：Largest Contentful Paint ：它表示在頁面加載過程中，最大的可見內(nèi)容元素（例如圖片、視頻、文本塊等）加載完成并呈現(xiàn)在屏幕上的時間點。，是測量加載速度感知的重要指標(biāo)之一。

獲取方式，我們主要通過Performance 來進行監(jiān)聽：

new PerformanceObserver((entryList) => {var maxSize = 0;var renderTime = 0;for (var entry of entryList.getEntries()) {// 渲染的內(nèi)容看最大值if(entry.size > maxSize){maxSize = entry.size;renderTime = entry.startTime;}}console.log('LCP', renderTime)
}).observe({type: 'largest-contentful-paint', buffered: true});

1.5 LongTask長任務(wù)統(tǒng)計

LongTask（長任務(wù)）是指在JavaScript主線程上執(zhí)行時間超過50毫秒的任務(wù)。這些任務(wù)可能是復(fù)雜的計算、大量數(shù)據(jù)處理、DOM操作或其他耗時的操作。

我們可以通過以下方式來獲取：

new PerformanceObserver((entryList) => {var list = entryList.getEntries();var entry = list[list.length-1];if(entry){console.log('LongTask',entry.startTime)}
}).observe({type: 'longtask', buffered: true});

一般我們?nèi)∽詈笠粋€就是長任務(wù)的總耗時。這個值越低，性能越高。

二. 性能指標(biāo)計算測試

貼出案例代碼：

function test() {const entry = performance.getEntriesByType('navigation')[0]const {domComplete, secureConnectionStart, domInteractive, domContentLoadedEventStart, domainLookupEnd,domainLookupStart, connectEnd, connectStart, responseStart, requestStart, responseEnd, loadEventStart, domContentLoadedEventEnd, fetchStart, redirectEnd, redirectStart} = entry// redirectTimeconst redirectTime = redirectEnd - redirectStart// appcacheTimeconst appcacheTime = domainLookupStart - fetchStart// DNS解析時間const dnsTime = domainLookupEnd - domainLookupStart// TCP建立時間const tcpTime = connectEnd - connectStart// ssl 時間const sslTime = connectEnd - secureConnectionStart// requestTime 讀取頁面第一個字節(jié)的時間(請求時間)const requestTime = responseStart - requestStart// 返回響應(yīng)時間const responseTime = responseEnd - responseStart// domContentLoadedEventEnd - domContentLoadedEventStartconst domLoaded = domContentLoadedEventEnd - domContentLoadedEventStart// loadEventEnd - loadEventStartconst loadTime = loadEventStart - domContentLoadedEventEndconst dom1 = domInteractive - responseEnd// 解析dom樹耗時const dom2 = domComplete - domInteractiveconsole.log('********各個階段的消耗耗時********')console.log('redirectTime', redirectTime)console.log('appcacheTime', appcacheTime)console.log('dnsTime', dnsTime)console.log('tcpTime', tcpTime, '其中包括ssl時間', sslTime)console.log('TTFB(請求響應(yīng)耗時)', requestTime)console.log('Trans(內(nèi)容傳輸耗時)', responseTime)console.log('解析`DOM`階段', dom1)console.log('加載`DOM`階段', dom2, '其中包括(domContentLoadedEventEnd - domContentLoadedEventStart)', domLoaded)console.log('load事件耗時', loadTime)console.log('********校驗時間差********')console.log('***********校驗 responseStart - fetchStart差值**************');console.log('responseStart - fetchStart', responseStart - fetchStart)console.log('appCache + dns+ tcp + requestTime 總和:', appcacheTime + dnsTime + tcpTime + requestTime)console.log('***********校驗 domInteractive - fetchStart差值**************');const tmp = appcacheTime + dnsTime + tcpTime + requestTime + responseTimeconst diff = domInteractive - fetchStartconsole.log('domInteractive - fetchStart', diff)console.log( 'appCache + dns+ tcp + request + response, 總和:', tmp, ', 空白時間', diff - tmp)console.log('空白時間(就是文檔解析和構(gòu)建DOM樹的過程)，即DOM1(domInteractive - responseEnd)', dom1)// 算一下domCompelete - fetchStartconsole.log('domCompelete - fetchStart', domComplete - fetchStart)console.log('********FCP********')const fcp = performance.getEntriesByName('first-contentful-paint')[0].startTimeconsole.log("LCP(通過performance.getEntriesByName('first-contentful-paint')計算出來的)", fcp)console.log('********LCP********')new PerformanceObserver((entryList) => {var maxSize = 0;var renderTime = 0;for (var entry of entryList.getEntries()) {// 渲染的內(nèi)容看最大值if (entry.size > maxSize) {maxSize = entry.size;renderTime = entry.startTime;}}console.log('LCP', renderTime)}).observe({ type: 'largest-contentful-paint', buffered: true });console.log('********LongTask********')new PerformanceObserver((entryList) => {var list = entryList.getEntries();var entry = list[list.length - 1];if (entry) {console.log('LongTask', entry.startTime)}}).observe({ type: 'longtask', buffered: true });
}

復(fù)制這段代碼到瀏覽器中，然后運行test()即可，結(jié)果如下：(FCP打印錯了）

代碼里主要打印了各個階段的耗時時長。我們主要看下下半部分的校驗部分。再把上面的圖搬過來對照著看：

2.1 衡量網(wǎng)絡(luò)請求響應(yīng)時間的指標(biāo)

從發(fā)起網(wǎng)絡(luò)請求（fetchStart）到服務(wù)器開始響應(yīng)（responseStart）的時間間隔。

• responseStart - fetchStart的差值為257毫秒。
• 而這個差值由：appCache + dns+ tcp + requestTime 4個階段連接而成，4個階段的時間總和為256.5毫秒，基本上接近。

2.2 衡量頁面加載速度的指標(biāo)

從發(fā)起網(wǎng)絡(luò)請求（fetchStart）到DOM解析完成（domInteractive）的時間間隔

• domInteractive - fetchStart的差值為1328毫秒。
• 而這個差值由：appCache + dns+ tcp + request + response + 空白時間 部分組成（空白時間就是上圖的紅色框部分）。
• 我們可以看到，前5個區(qū)域的時間總和大概是：480毫秒。空白時間則848毫秒。
• 我們又計算了domInteractive - responseEnd的差值，實際上就是DOM1，也就是加載DOM的時間，時間差為848毫秒，相吻合。

綜上所述：

• 頁面加載速度的指標(biāo)可以由：DNS+TCP+Request+Response+DOM加載完畢耗時 的總和來決定。

另外我們還能看出來，LCP的計算可以幾乎為：domInteractive - fetchStart, 當(dāng)然你用PerformanceObserver進行監(jiān)聽也是可以的。

這里代表頁面加載速度，此時DOM僅僅是解析完成，如果想看DOM也加載完成的耗時，看指標(biāo)domComplete - fetchStart。

2.3 TTI(Time to Interactive)衡量頁面可交互性的指標(biāo)

TTI：表示從頁面開始加載到用戶可以與頁面進行交互的時間。它的計算方式如下：

1. FCP 時間為起始時間
2. 查找到指示有5s的靜默窗口時間（沒有長任務(wù)并且不超過兩個正在執(zhí)行的GET請求）。
3. 向后搜索靜默窗口前的最后一個長任務(wù)，如果沒有找到長任務(wù)，則在FCP上停止。
4. TTI 是在安靜窗口之前最后一個長任務(wù)的結(jié)束時間（如果沒有找到長任務(wù)，則與FCP相同）

建議大家使用谷歌官方提供的：tti-polyfill

import ttiPolyfill from './path/to/tti-polyfill.js';ttiPolyfill.getFirstConsistentlyInteractive(opts).then((tti) => {// Use `tti` value in some way.
});

當(dāng)然，也可以使用一種較為粗略的方式來計算：

1. 首先我們理解一下TTI，是從頁面開始加載到用戶可以與頁面進行交互的時間。
2. 頁面開始加載，我們是不是可以看做fetchStart的時間。
3. 頁面進行交互的時間，那這個時候dom肯定是加載完畢了。我們按照非常極限的思路去想，這個是不是可以看做dom加載完畢的時間點，即domComplete。
4. 那么TTI ≈ domComplete - fetchStart

例如我用Lighthouse計算出來的TTI：

使用：domComplete - fetchStart 計算出來的值：

function getTTI(){const entry = performance.getEntriesByType('navigation')[0]const {domComplete,fetchStart} = entryconsole.log('TTI', domComplete - fetchStart)
}
getTTI()

結(jié)果如下：

2.4 TBT(Total Blocking Time)

TBT就是衡量從FCP時間點到TTI這個時間點的時間區(qū)間內(nèi)，所有超過50毫秒的長任務(wù)的總耗時。（這個看下來難以通過編碼的方式來實現(xiàn)計算，也無法預(yù)估）

2.5 總結(jié)

1. 我們在為頁面做性能監(jiān)控的時候，LCP和FCP是我們的幾個重要關(guān)注對象。
2. LCP可以通過PerformanceObserver進行檢測。
3. FCP可以通過performance.getEntriesByName('first-contentful-paint')[0].startTime獲取。
4. 頁面性能的發(fā)部分數(shù)據(jù)都可以從performance.getEntriesByType('navigation')[0]這里面獲取到。
5. 如果你想衡量網(wǎng)絡(luò)請求響應(yīng)時間的指標(biāo)：responseStart - fetchStart，代表從發(fā)起網(wǎng)絡(luò)請求（fetchStart）到服務(wù)器開始響應(yīng)（responseStart）的時間間隔。
6. 如果你想衡量頁面加載速度的指標(biāo)：domInteractive - fetchStart，代表從發(fā)起網(wǎng)絡(luò)請求（fetchStart）到DOM解析完成（domInteractive）的時間間隔。
7. domComplete - fetchStart 這個差值基本上囊括了最核心的部分。包括了從開始獲取頁面資源到 DOM 解析完成的整個過程，其中包括了網(wǎng)絡(luò)請求、資源加載、解析 HTML、構(gòu)建 DOM 樹等操作。