背景

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

分析面板介紹

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

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

分析步驟說明

首先，我們在分析的時候，建議使用隱身模式開啟頁面，排除一些外掛等因素對頁面效能情況的影響。然後，我們把頁面快取勾選去掉，要測 disable cache 的情況，再把網路情況調整一下，我們用電腦開啟頁面的時候一般都連著 wifi 等，要更真實一些去測頁面的效能，還是把網路調

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

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

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

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

從網路面板分析

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

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

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

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

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

從效能面板分析

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

網路&&白屏

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

上圖，我們可以看幾點資訊：

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

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

火焰圖

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

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

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

還可以橫向切換 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 毫秒的時間響應使用者輸入。如果超過此時間，使用者就會認為應用反應遲緩。

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

效能指標優化建議解讀

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

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

可優化項有2個建議：

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

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

手動診斷項有6個建議：

• 最小化主執行緒工作
• 減少JavaScript執行時間
• 避免DOM太大
• 通過有效的快取策略快取一些靜態資源
• 避免連結關鍵請求
• 保持低請求數量和小傳輸大小

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

通過的審查項

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

Accessibility輔助功能

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

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

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

總結

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

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

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

到此這篇關於利用 Chrome Dev Tools 進行頁面效能分析的步驟說明(前端效能優化)的文章就介紹到這了,更多相關 Chrome Dev Tools 頁面效能內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！