前端性能優化之利用 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: onl oad Event

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

另外，我們可以看到頁面中的記憶體使用的情況，比如 JS Heap(堆)，如果曲線一直在增長，則說明存在記憶體泄露，從圖中可以看出，相當長的一段時間，記憶體曲線都是沒有下降的，這里是有發生記憶體泄露的可能的，在 onl oad 之后，記憶體才得到釋放，更多記憶體泄露產生的原因及分析方法，可以參照我的這篇文章《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」,認真學前端，做個有專業的技術人...

標籤：JavaScript

上一篇：vue使用JSEncrypt實作rsa加密及掛載方法

下一篇：JS DOM中getElement系列和querySelector系列獲取節點