我們經常使用 Chrome Dev Tools 來開發調試，但是很少知道怎麼利用它來分析頁面性能，這篇文章，我將詳細說明怎樣利用 Chrome Dev Tools 進行頁面性能分析及性能報告數據如何解讀。如果你認真看了本文，一定能學會分析，沒學會，你來找我～
上圖是 Chrome Dev Tools 的一個截圖，其中，我認為能用於進行頁面性能快速分析的主要是圖中圈出來的幾個模塊功能，這裡簡單介紹一下：
首先，我們在分析的時候，建議使用隱身模式打開頁面，排除一些插件等因素對頁面性能情況的影響。然後，我們把頁面緩存勾選去掉，要測 disable cache 的情況，再把網絡情況調整一下，我們用電腦打開頁面的時候一般都連著 wifi 等，要更真實一些去測頁面的性能，還是把網絡調到 3G 等情況比較好，如圖：
調整好之後，我們切到 Performance 面板，這裡先說明一下一些按鈕的作用：
上圖，從左到右分別代表的是：
這裡，我以京東的一個頁面為例,勾選 disable cache,網絡情況為 Fast 3G，點擊2，然後就結果來說明一下，應該如何理解性能結果，找出優化點。
我們先來看看網絡面板，看看都有哪些信息。如下圖所示：
從圖中可以看出，頁面中有的一些性能優化手段有：頁面直出，輸入https://wq.jd.com/wxportal/index_v6 ,頁面加載回來的 document 就是一個渲染好的 html 頁面圖片優化，部署在不同的CDN域名下，用webp/dpg等格式圖片，圖片切割等http 協議有部分採用 http2，多路復用，加快資源加載按需加載，菜單先加載第一屏的圖標，滑動到第二屏時再加載第二屏的圖標而個人認為，還可以考慮用上的一些性能優化手段有：
html 的大小為138kb,Content Download的時間為七百多毫秒，感覺可以拆分一下頁面，非一二屏的內容分開加載。TTFB(Time To First Byte)為五百多毫秒,在下載第一個字節之前等待的時間過久，不過這裡主要是用戶網絡情況影響，可以做的比較少。如DNS解析優化，減少後端服務處理時間等合併雪碧圖，大輪播圖下面的菜單分類那裡的圖標，可以用一張雪碧圖來集合這些圖標頂部輪播圖，在首次加載時，可以先加載第一幀的圖片，後面幾幀延後一下切到 Performance 面板，點擊自動重啟頁面，並記錄整個頁面加載的過程，然後來分析結果～
網絡&&白屏
性能面板，有很多很多的參數，我們要看一些比較常見的。首先看白屏時間和網絡加載情況，如下圖：
上圖，我們可以看幾點信息：FPS 曲線沒有標紅，如果有很多標紅的則說明頁面存在渲染卡頓多的地方從網絡資源加載情況來看，圖片沒有啟用 http2，因此每次可以同時加載的圖片數有限，未被加載的圖片有等待過程資源的加載時間也可以看到，比如輪播的背景圖加載了近 700 毫秒，時間有點長另外，我們可以看一下資源加載有沒有空白期，雖然上圖沒有，但是如果資源加載之間存在空白期，說明沒有充分利用資源加載的空閒時間，可以調整一下。
火焰圖火焰圖，主要在 Main 面板中，是我們分析具體函數耗時最常看的面板，我們來看一下，如圖：首先，面板中會有很多的 Task，如果是耗時長的 Task，其右上角會標紅(圖中沒有，說明頁面首屏的邏輯處理分配得還不錯)，這個時候，我們可以選中標紅的 Task (這裡就隨手選中一個)，然後放大(選中，滑動滑鼠可放大)，看其具體的耗時點。
放大後，這裡可以看到都在做哪些操作，哪些函數耗時了多少,這裡代碼有壓縮，看到的是壓縮後的函數名。然後我們點擊一下某個函數，在面板最下面，就會出現代碼的信息，是哪個函數，耗時多少，在哪個文件上的第幾行等。這樣我們就很方便地定位到耗時函數了。還可以橫向切換 tab ，看它的調用棧等情況，更方便地找到對應代碼。具體大家可以試試～時間線&&內存情況在 Timings 的區域，我們可以看到本次加載的一些關鍵時間，分別有：
FCP: First Contentful PaintLCP: Largest Contentful PaintFMP: First Meaningful PaintDCL: DOMContentLoaded Event我們可以選區(選擇從白屏到有內容的區域，代表本次的頁面加載過程)，可以對照著看一下上面的時間，截圖如下：
另外，我們可以看到頁面中的內存使用的情況，比如 JS Heap(堆)，如果曲線一直在增長，則說明存在內存洩露，從圖中可以看出，相當長的一段時間，內存曲線都是沒有下降的，這裡是有發生內存洩露的可能的，在 Onload 之後，內存才得到釋放。更多內存洩露產生的原因及分析方法，可以參照我的這篇文章《Chrome 瀏覽器垃圾回收機制與內存洩漏分析》
最下方就是頁面的一個整理耗時概況，如果 Scripting 時間過長，則說明 js執行的邏輯太多，可以考慮優化js，如果渲染時間過長，則考慮優化渲染過程，如果空閒時間過多，則可以考慮充分利用起來，比如把一些上報操作放到頁面空閒時間再上報等。
以上就是性能面板可以看的一些信息。另外，我們可以藉助 Layers面板來查看頁面分層情況的3D視圖，Rendering面板(點擊more tools->Rendering即可打開)，勾選Layer Bordersk可以看到複合層、RenderLayer區域，可以幫助分析動畫卡頓、是否開啟GPU加速等問題，而 Memory 面板 和 JavaScript Profiler 面板主要是分析內存洩露的，這裡就不說了，可以看我另一篇文章《Chrome 瀏覽器垃圾回收機制與內存洩漏分析》
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個建議：
延遲會阻塞渲染的資源加載，這裡是一個 navfoot.6bf68af7.css延遲視口外的圖片加載，這裡列舉了不必要加載的圖片(和我上文提的優化建議一致，哈哈)這項裡面的內容指的是LightHouse發現的一些可以直接優化的點，你可以對應這些點來進行優化。
手動診斷項有6個建議：
這些項目表示LightHouse並不能替你決定當前是好是壞，但是把詳情列出來，由你手動排查每個項目的情況
通過的審查項
這裡列出的都是做的好的地方，本文例子共有16條，不過即使做的好，依然值得我們進去仔細看一下，因為像所有條目一樣，這裡的每個條目也有一個showmore，我們可以點進去仔細學習背後的知識和原理！
Accessibility輔助功能輔助功能指的是那些可能超出"普通"用戶範圍之外的用戶的體驗，他們以不同於你期望的方式訪問你的網頁或進行交互，本文的例子建議如下圖：
輔助功能類別測試屏幕閱讀器的能力和其他輔助技術是否能在頁面中正常工作。例如：按元素來使用屬性，標籤使用是否規範，img 標籤是否缺少 alt 屬性，可辨別的元素命名等等。這一項我們不展開講，但是還是建議大家按照審計建議修改一下網頁。
其他幾項，本文的例子最佳實踐評分挺高的，而例子不支持PWA，也不需要考慮SEO，這裡就不展開說明了，有對應需求的可以自己詳細看看即可。
最後總結一下，我們利用Chrome Dev Tools 進行頁面性能分析有以下指標可以參考：
而這些分析方法，本文都詳細寫了。可以認真看看～
關於奇舞周刊《奇舞周刊》是360公司專業前端團隊「奇舞團」運營的前端技術社區。關注公眾號後，直接發送連結到後臺即可給我們投稿。