前端性能優化之利用 Chrome Dev Tools 進行頁面性能分析

背景

我們經常使用 Chrome Dev Tools 來開發調試，但是很少知道怎麼利用它來分析頁面性能，這篇文章，我將詳細說明怎樣利用 Chrome Dev Tools 進行頁面性能分析及性能報告數據如何解讀。

分析面板介紹

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

• Network : 頁面中各種資源請求的情況，這裡能看到資源的名稱、狀態、使用的協議(http1/http2/quic...)、資源類型、資源大小、資源時間線等情況
• Performance : 頁面各項性能指標的火焰圖，這裡能看到白屏時間、FPS、資源載入時間線、longtask、記憶體變化曲線等等信息
• Memory : 可以記錄某個時刻的頁面記憶體情況，一般用於分析記憶體泄露
• JavaScript Profiler : 可以記錄函數的耗時情況，方便找出耗時較多的函數
• Layers : 展示頁面中的分層情況

分析步驟說明

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

調整好之後，我們切到 Performance 面板，這裡先說明一下一些按鈕的作用：

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

1. 手動開始記錄，開始後需要手動結束
2. 自動重啟頁面，並記錄整個頁面載入的過程。這個是最常用的，一般大概分析頁面性能的時候都是點這個就夠了
3. 清除性能錄製的記錄
4. 上傳頁面性能錄製的數據
5. 下載頁面性能錄製的數據
6. 選擇要展示的性能記錄。你可能進行了多次分析，這裡可以切換去看每次的結果
7. 是否捕捉頁面載入過程的截圖，這個一般都要勾選
8. 是否記錄記憶體變化，這個一般都要勾選
9. 垃圾回收，點擊了即進行一次垃圾回收

這裡，我以京東的一個頁面為例,勾選 disable cache,網路情況為 Fast 3G，來說明一下，應該如何理解性能結果，找出優化點。

從網路面板分析

我們來看看網路面板，看看都有哪些信息。如下圖所示：

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

1. 頁面直出，輸入https://wq.jd.com/wxportal/index_v6 ,頁面載入回來的 document 就是一個渲染好的 html 頁面
2. 圖片優化，部署在不同的CDN功能變數名稱下，用webp/dpg等格式圖片，圖片切割等
3. http 協議有部分採用 http2，多路復用，加快資源載入
4. 小 logo 使用base42來處理
5. 按需載入，菜單先載入第一屏的圖標，滑動到第二屏時再載入第二屏的圖標

而從圖片，個人認為，還可以考慮用上的一些性能優化手段有：

1. html 的大小為138kb,Content Download的時間為七百多毫秒，感覺可以拆分一下頁面，非一二屏的內容分開載入。
2. TTFB(Time To First Byte)為五百多毫秒,在下載第一個位元組之前等待的時間過久，不過這裡主要是用戶網路情況影響，可以做的比較少。如DNS解析優化，減少後端服務處理時間等
3. 合併雪碧圖，大輪播圖下麵的菜單分類那裡的圖標，可以用一張雪碧圖來集合這些圖標
4. 頂部輪播圖，在首次載入時，可以先載入第一幀的圖片，後面幾幀延後一下
5. 圖片較多，可以的話，都用 http2 協議

從性能面板分析

切到 Performance 面板，點擊自動重啟頁面，並記錄整個頁面載入的過程，然後來分析結果～​

網路&&白屏

性能面板，有很多很多的參數，我們要看一些比較常見的。首先看白屏時間和網路載入情況，如下圖：

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

1. 本次頁面載入的白屏時間約為 1000 ms
2. FPS 曲線沒有標紅，如果有很多標紅的則說明頁面存在渲染卡頓多的地方
3. 從網路資源載入情況來看，圖片沒有啟用 http2，因此每次可以同時載入的圖片數有限，未被載入的圖片有等待過程
4. 資源的載入時間也可以看到，比如輪播的背景圖載入了近 700 毫秒，時間有點長

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

火焰圖

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

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

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

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

時間線&&記憶體情況

在 Timings 的區域，我們可以看到本次載入的一些關鍵時間，分別有：

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

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

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

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

其他面板

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

用Audits工具分析

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

整體情況

Audits主要從5個方面來給網頁打分，當然你也可以去掉某些方面的評估。在選擇了設備、評估方面、網路情況等選項後，點擊 Run Audits ,我們將會得到一份報告。

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

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

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

性能指標優化建議解讀

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

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

可優化項有2個建議：

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

這項裡面的內容指的是LightHouse發現的一些可以直接優化的點，你可以對應這些點來進行優化。

手動診斷項有6個建議：

1. 最小化主線程工作
2. 減少JavaScript執行時間
3. 避免DOM太大
4. 通過有效的緩存策略緩存一些靜態資源
5. 避免鏈接關鍵請求
6. 保持低請求數量和小傳輸大小

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

通過的審查項

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

Accessibility輔助功能

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

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

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

總結

最後總結一下，我們利用Chrome Dev Tools 進行頁面性能分析有以下指標可以參考：

• 從網路面板分析
• 從性能面板分析
• 從Memory面板等分析記憶體泄露
• 用Audits工具分析

而這些分析方法，本文都詳細寫了。可以認真看看～

姊妹篇推薦

• 前端性能優化之自定義性能指標及上報方法詳解

最後

• 歡迎加我微信(winty230)，拉你進技術群，長期交流學習...
• 歡迎關註「前端Q」,認真學前端，做個有專業的技術人...