背景

我們經(jīng)常使用 Chrome Dev Tools 來開發(fā)調(diào)試，但是很少知道怎么利用它來分析頁面性能，這篇文章，我將詳細(xì)說明怎樣利用 Chrome Dev Tools 進行頁面性能分析及性能報告數(shù)據(jù)如何解讀。

分析面板介紹

上圖是 Chrome Dev Tools 的一個截圖，其中，我認(rèn)為能用于進行頁面性能快速分析的主要是圖中圈出來的幾個模塊功能，這里簡單介紹一下：

• Network : 頁面中各種資源請求的情況，這里能看到資源的名稱、狀態(tài)、使用的協(xié)議(http1/http2/quic...)、資源類型、資源大小、資源時間線等情況
• Performance : 頁面各項性能指標(biāo)的火焰圖，這里能看到白屏?xí)r間、FPS、資源加載時間線、longtask、內(nèi)存變化曲線等等信息
• Memory : 可以記錄某個時刻的頁面內(nèi)存情況，一般用于分析內(nèi)存泄露
• JavaScript Profiler : 可以記錄函數(shù)的耗時情況，方便找出耗時較多的函數(shù)
• Layers : 展示頁面中的分層情況

分析步驟說明

首先，我們在分析的時候，建議使用隱身模式打開頁面，排除一些插件等因素對頁面性能情況的影響。然后，我們把頁面緩存勾選去掉，要測 disable cache 的情況，再把網(wǎng)絡(luò)情況調(diào)整一下，我們用電腦打開頁面的時候一般都連著 wifi 等，要更真實一些去測頁面的性能，還是把網(wǎng)絡(luò)調(diào)到 3G 等情況比較好，如圖：

調(diào)整好之后，我們切到 Performance 面板，這里先說明一下一些按鈕的作用：

上圖，從左到右分別代表的是：

• 手動開始記錄，開始后需要手動結(jié)束
• 自動重啟頁面，并記錄整個頁面加載的過程。這個是最常用的，一般大概分析頁面性能的時候都是點這個就夠了
• 清除性能錄制的記錄
• 上傳頁面性能錄制的數(shù)據(jù)
• 下載頁面性能錄制的數(shù)據(jù)
• 選擇要展示的性能記錄。你可能進行了多次分析，這里可以切換去看每次的結(jié)果
• 是否捕捉頁面加載過程的截圖，這個一般都要勾選
• 是否記錄內(nèi)存變化，這個一般都要勾選
• 垃圾回收，點擊了即進行一次垃圾回收

這里，我以京東的一個頁面為例,勾選 disable cache,網(wǎng)絡(luò)情況為 Fast 3G，來說明一下，應(yīng)該如何理解性能結(jié)果，找出優(yōu)化點。

從網(wǎng)絡(luò)面板分析

我們來看看網(wǎng)絡(luò)面板，看看都有哪些信息。如下圖所示：

從圖中可以看出，頁面中有的一些性能優(yōu)化手段有：

• 頁面直出，輸入https://wq.jd.com/wxportal/index_v6 ,頁面加載回來的 document 就是一個渲染好的 html 頁面
• 圖片優(yōu)化，部署在不同的CDN域名下，用webp/dpg等格式圖片，圖片切割等
• http 協(xié)議有部分采用 http2，多路復(fù)用，加快資源加載
• 小 logo 使用base42來處理
• 按需加載，菜單先加載第一屏的圖標(biāo)，滑動到第二屏?xí)r再加載第二屏的圖標(biāo)

而從圖片，個人認(rèn)為，還可以考慮用上的一些性能優(yōu)化手段有：

• html 的大小為138kb,Content Download的時間為七百多毫秒，感覺可以拆分一下頁面，非一二屏的內(nèi)容分開加載。
• TTFB(Time To First Byte)為五百多毫秒,在下載第一個字節(jié)之前等待的時間過久，不過這里主要是用戶網(wǎng)絡(luò)情況影響，可以做的比較少。如DNS解析優(yōu)化，減少后端服務(wù)處理時間等
• 合并雪碧圖，大輪播圖下面的菜單分類那里的圖標(biāo)，可以用一張雪碧圖來集合這些圖標(biāo)
• 頂部輪播圖，在首次加載時，可以先加載第一幀的圖片，后面幾幀延后一下
• 圖片較多，可以的話，都用 http2 協(xié)議

從性能面板分析

切到 Performance 面板，點擊自動重啟頁面，并記錄整個頁面加載的過程，然后來分析結(jié)果～​

網(wǎng)絡(luò)&&白屏

性能面板，有很多很多的參數(shù)，我們要看一些比較常見的。首先看白屏?xí)r間和網(wǎng)絡(luò)加載情況，如下圖：

上圖，我們可以看幾點信息：

• 本次頁面加載的白屏?xí)r間約為 1000 ms
• FPS 曲線沒有標(biāo)紅，如果有很多標(biāo)紅的則說明頁面存在渲染卡頓多的地方
• 從網(wǎng)絡(luò)資源加載情況來看，圖片沒有啟用 http2，因此每次可以同時加載的圖片數(shù)有限，未被加載的圖片有等待過程
• 資源的加載時間也可以看到，比如輪播的背景圖加載了近 700 毫秒，時間有點長

另外，我們可以看一下資源加載有沒有空白期，雖然上圖沒有，但是如果資源加載之間存在空白期，說明沒有充分利用資源加載的空閑時間，可以調(diào)整一下。

火焰圖

火焰圖，主要在 Main 面板中，是我們分析具體函數(shù)耗時最常看的面板，我們來看一下，如圖：

首先，面板中會有很多的 Task，如果是耗時長的 Task，其右上角會標(biāo)紅(圖中沒有，說明頁面首屏的邏輯處理分配得還不錯)，這個時候，我們可以選中標(biāo)紅的 Task (這里就隨手選中一個)，然后放大(選中，滑動鼠標(biāo)可放大)，看其具體的耗時點。

放大后，這里可以看到都在做哪些操作，哪些函數(shù)耗時了多少,這里代碼有壓縮，看到的是壓縮后的函數(shù)名。然后我們點擊一下某個函數(shù)，在面板最下面，就會出現(xiàn)代碼的信息，是哪個函數(shù)，耗時多少，在哪個文件上的第幾行等。這樣我們就很方便地定位到耗時函數(shù)了。

還可以橫向切換 tab ，看它的調(diào)用棧等情況，更方便地找到對應(yīng)代碼。具體大家可以試試～

時間線&&內(nèi)存情況

在 Timings 的區(qū)域，我們可以看到本次加載的一些關(guān)鍵時間，分別有：

• FCP: First Contentful Paint
• LCP: Largest Contentful Paint
• FMP: First Meaningful Paint
• DCL: DOMContentLoaded Event
• L: Onload Event

我們可以選區(qū)(選擇從白屏到有內(nèi)容的區(qū)域，代表本次的頁面加載過程)，可以對照著看一下上面的時間，截圖如下：

另外，我們可以看到頁面中的內(nèi)存使用的情況，比如 JS Heap(堆)，如果曲線一直在增長，則說明存在內(nèi)存泄露，從圖中可以看出，相當(dāng)長的一段時間，內(nèi)存曲線都是沒有下降的，這里是有發(fā)生內(nèi)存泄露的可能的，在 Onload 之后，內(nèi)存才得到釋放。更多內(nèi)存泄露產(chǎn)生的原因及分析方法，可以參照我的這篇文章《Chrome 瀏覽器垃圾回收機制與內(nèi)存泄漏分析》

最下方就是頁面的一個整理耗時概況，如果 Scripting 時間過長，則說明 js執(zhí)行的邏輯太多，可以考慮優(yōu)化js，如果渲染時間過長，則考慮優(yōu)化渲染過程，如果空閑時間過多，則可以考慮充分利用起來，比如把一些上報操作放到頁面空閑時間再上報等。

其他面板

以上就是性能面板可以看的一些信息。另外，我們可以借助 Layers面板來查看頁面分層情況的3D視圖，Rendering面板(點擊more tools->Rendering即可打開)，勾選Layer Bordersk可以看到復(fù)合層、RenderLayer區(qū)域，可以幫助分析動畫卡頓、是否開啟GPU加速等問題，而 Memory 面板 和 JavaScript Profiler 面板主要是分析內(nèi)存泄露的，這里就不說了，可以看我另一篇文章《Chrome 瀏覽器垃圾回收機制與內(nèi)存泄漏分析》

用Audits工具分析

Audits 其實就是 LightHouse，LightHouse 是Google開源的一個自動化測試工具，它通過一系列的規(guī)則來對網(wǎng)頁進行評估分析，最終給出一份評估報告。它的面板是這樣的：

整體情況

Audits主要從5個方面來給網(wǎng)頁打分，當(dāng)然你也可以去掉某些方面的評估。在選擇了設(shè)備、評估方面、網(wǎng)絡(luò)情況等選項后，點擊 Run Audits ,我們將會得到一份報告。

上圖是一個總體報告，可以看出，這個頁面的性能不太合格。當(dāng)然一次的測試也說明不了什么問題，只能做個參考。我們看它的性能指標(biāo)分別有：

• First Contentful Paint：內(nèi)容首次開始繪制。
• First Meaningful Paint：可以簡單理解為用戶看到網(wǎng)頁主要內(nèi)容的時間，分?jǐn)?shù)越低，頁面顯示其主要內(nèi)容的速度就越快。圖中例子，網(wǎng)頁首次有效繪制時間為2.5s。
• Speed Index：速度指標(biāo)是一個頁面加載性能指標(biāo)，向你展示明顯填充頁面內(nèi)容的速度，此指標(biāo)的分?jǐn)?shù)越低越好。
• First CPU Idle：首次 CPU 空閑時間
• Time to Interactive：可互動時間，頁面中的大多數(shù)網(wǎng)絡(luò)資源完成加載并且CPU在很長一段時間都很空閑的所需的時間。此時可以預(yù)期cpu非?？臻e，可以及時的處理用戶的交互操作。
• Max Potential First Input Delay：最大的輸入延遲時間，輸入響應(yīng)能力對用戶如何看待你應(yīng)用的性能起著關(guān)鍵作用。應(yīng)用有 100 毫秒的時間響應(yīng)用戶輸入。如果超過此時間，用戶就會認(rèn)為應(yīng)用反應(yīng)遲緩。

這些時間，都可以點擊圖中紅框切換展示方式，會附上對應(yīng)的時間解釋，然后可以點擊 Learn more 來查看詳細(xì)的指標(biāo)介紹。在文檔中，每一項指標(biāo)都會明確的分為三個部分：為什么說此審查非常重要；如何通過此審查；如何實現(xiàn)此審查；

性能指標(biāo)優(yōu)化建議解讀

性能建議主要分為3類， Opportunities 可優(yōu)化項、手動診斷項、通過的審查項。本次的例子如下圖：

圖中的每一項都可以展開來看明細(xì)解釋，其中：

可優(yōu)化項有2個建議：

• 延遲會阻塞渲染的資源加載，這里是一個 navfoot.6bf68af7.css
• 延遲視口外的圖片加載，這里列舉了不必要加載的圖片(和我上文提的優(yōu)化建議一致，哈哈)

這項里面的內(nèi)容指的是LightHouse發(fā)現(xiàn)的一些可以直接優(yōu)化的點，你可以對應(yīng)這些點來進行優(yōu)化。

手動診斷項有6個建議：

• 最小化主線程工作
• 減少JavaScript執(zhí)行時間
• 避免DOM太大
• 通過有效的緩存策略緩存一些靜態(tài)資源
• 避免鏈接關(guān)鍵請求
• 保持低請求數(shù)量和小傳輸大小

這些項目表示LightHouse并不能替你決定當(dāng)前是好是壞，但是把詳情列出來，由你手動排查每個項目的情況

通過的審查項

這里列出的都是做的好的地方，本文例子共有16條，不過即使做的好，依然值得我們進去仔細(xì)看一下，因為像所有條目一樣，這里的每個條目也有一個showmore，我們可以點進去仔細(xì)學(xué)習(xí)背后的知識和原理！

Accessibility輔助功能

輔助功能指的是那些可能超出"普通"用戶范圍之外的用戶的體驗，他們以不同于你期望的方式訪問你的網(wǎng)頁或進行交互，本文的例子建議如下圖：

輔助功能類別測試屏幕閱讀器的能力和其他輔助技術(shù)是否能在頁面中正常工作。例如：按元素來使用屬性，標(biāo)簽使用是否規(guī)范，img 標(biāo)簽是否缺少 alt 屬性，可辨別的元素命名等等。這一項我們不展開講，但是還是建議大家按照審計建議修改一下網(wǎng)頁。

其他幾項，本文的例子最佳實踐評分挺高的，而例子不支持PWA，也不需要考慮SEO，這里就不展開說明了，有對應(yīng)需求的可以自己詳細(xì)看看即可。

總結(jié)

最后總結(jié)一下，我們利用Chrome Dev Tools 進行頁面性能分析有以下指標(biāo)可以參考：

• 從網(wǎng)絡(luò)面板分析
• 從性能面板分析
• 從Memory面板等分析內(nèi)存泄露
• 用Audits工具分析

而這些分析方法，本文都詳細(xì)寫了?？梢哉J(rèn)真看看～

到此這篇關(guān)于利用 Chrome Dev Tools 進行頁面性能分析的步驟說明(前端性能優(yōu)化)的文章就介紹到這了,更多相關(guān) Chrome Dev Tools 頁面性能內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論