效能分析介紹

摘要： 該文章對於Chrome Devtools效能分析模組進行了全面的介紹。 請檢視 初識執行時效能分析 瞭解更多關於如何利用Chrome Devtools分析頁面效能的內容。 效能記錄錄製 錄製執行時效能記錄 若要分析頁面執行時效能需要錄製執行時效能。 開啟待分析...

該文章對於Chrome Devtools效能分析模組進行了全面的介紹。

請檢視 ofollow,noindex" target="_blank">初識執行時效能分析 瞭解更多關於如何利用Chrome Devtools分析頁面效能的內容。

效能記錄錄製

錄製執行時效能記錄

若要分析頁面執行時效能需要錄製執行時效能。

1. 開啟待分析效能的頁面。

2. 開啟 Performance 視窗。

3. 點選 Record 按鈕 .

   

   圖 1. 為藍色邊框選中區域為開始 錄製 按鈕

4. 在當前頁面進行操作，DevTools會記錄所有頁面活動。

5. 再次點選 Record 或者點選 Stop 按鈕停止記錄。

載入時效能記錄錄製

若要分析頁面記載時效能需要錄製載入時效能。

1. 開啟待分析效能的頁面。

2. 開啟Devtools中 Performance 視窗。

3. 點選左上角 重新載入 按鈕，如下圖。DevTools會自動記錄頁面載入是各項效能指標，載入完成幾秒後自動停止記錄。

   

   圖 2. 藍色邊框選中區域為 重新載入 按鈕

當您在頁面中進行操作時，Devtools記錄會自動增加。

圖 3. 頁面載入時記錄

抓取記錄過程中的螢幕快照

採用 Screenshots 選項開啟為每一幀記錄螢幕快照功能。

圖 4. 螢幕快照 Screenshots 開啟選項

檢視 螢幕快照解析 瞭解如何藉助該資訊分析效能。

記錄過程中強制進行垃圾回收

在對頁面進行錄製的過程中，點選 Collect garbage 按鈕強制進行垃圾回收。

圖 5. 進行垃圾回收按鈕圖示

檢視錄製設定

點選 Capture settings 按鈕檢視更多關於DevTools錄製設定選項。

圖 6. 設定 區域如圖藍框所示

禁用JavaScript樣例

預設情況下，記錄中 Main 部分會詳細顯示整個錄製過程中JavaScript函式呼叫棧情況。採用下邊方法禁用棧呼叫：

1. 開啟 設定 選單 ，開啟方式檢視上面關於 設定部分介紹 。

2. 選中Disable JavaScript Samples選項

3. 開始頁面的錄製

圖7 圖8展示了開啟和禁止JavaScript樣例的效果圖。禁用樣例之後錄製忽略了所有JavaScript棧的呼叫，記錄的 Main 部分會比開啟更簡短。

圖 7. 禁用JS樣例錄製的結果

圖 8. 啟用JS樣例錄製的結果

控制錄製過程中的網路載入速度

控制錄製過程中網路載入速度的方法:

1. 開啟 設定 選單 ，開啟方式檢視上面關於 設定部分介紹 。

2. 將 Network 設定為需要的載入速度模式。

控制錄製過程中CPU工作頻率

控制錄製過程中CPU工作頻率的方法:

1. 開啟 設定 選單 ，開啟方式檢視上面關於 設定部分介紹 。

2. 將 CPU 設定為需要的運算速度模式。

CPU工作頻率的控制結果跟實際使用的機器能力有關。例如， 2x slowdown 選項會使你本地CPU運算速率比正常情況下下降2倍。同桌上型電腦和筆記本裝置相比，由於裝置設計架構不同，Devtools不能精確模擬移動端裝置的CPU運算模式。

開啟加速渲染工具

檢視更多渲染工具方法:

1. 開啟 設定 選單 ，開啟方式檢視上面關於 設定部分介紹 。

2. 選中 Enable advanced paint instrumentation 選項。

檢視 View layers 和 View paint profiler 瞭解更多關於檢視渲染問題。

儲存記錄

單擊滑鼠右鍵選擇 Save Profile 儲存記錄。

圖 9. Save Profile 儲存記錄

載入記錄

單擊滑鼠右鍵選擇 Load Profile 載入記錄。

圖 10. Load Profile 載入記錄

清除記錄

記錄生成後，點選 刪除 按鈕清除 Performance 視窗中的記錄資料。

圖 11. 清除記錄按鈕

分析效能記錄

執行時 或者 載入時 效能錄製結束後，在 Performance 視窗中會顯示相關資料，從而對於記錄過程中的情況進行分析。

選擇記錄中的一部分

在 Overview 視窗中，滑鼠右鍵或者左鍵拖拽選中記錄的某一部分。 Overview 視窗指的是包含 FPS , CPU 和 NET 圖表部分。

圖 12. 拖拽滑鼠在視窗中增加選中範圍

用鍵盤選擇分析部分:

1. 在 Main 區域或者任意相鄰的區域（例如： Interactions , Network , 或者 GPU ）中點選。該選中方式僅在任一上述區域被選中的情況下有效。

2. 採用 W , A , S , D 按鍵分別進行區域的放大，左移，縮小，右移。

用觸控板選擇分析部分:

1. 將滑鼠放置在 Overview 區域（指包含 FPS , CPU 和 NET 區域的部分）或者 Details 區域（指包含 Main 和 Interactions 區域的部分）。

2. 兩個手指向上、向左、向下、向右滑動分別代表縮小、左移、放大、右移區域。

在 Main 或其他臨近區域滑鼠右鍵長按，上下拖動可滾動火焰圖表。左右移動會改變記錄的選擇區域。

搜尋某一操作

快捷鍵 Command + F (Mac) 或者 Control + F (Windows, Linux) 開啟搜尋功能，搜尋區域會顯示在 Performance 面板的底部。

圖 13. 搜尋字串採用正在表示式查詢所有以 `E`開頭的操作

定位搜尋結果:

• 採用 向上 和 向下 按鈕實現前一個後一個切換。

• 組合鍵 Shift + Enter 切換到上一個， Enter 切換到下一個。

修改搜尋設定:

• 選中 選項開啟查詢時大小寫不敏感功能。

• 選中 選項開啟查詢中允許使用表示式功能。

點選 Cancel 按鈕關閉搜尋面板。

檢視主執行緒活動

利用 Main 區域檢視頁面主執行緒載入時的主要活動。

圖 14. 藍色框內所示為 Main 視窗

點選某一函式在 Summary 視窗中檢視更多詳細資訊。如下圖中所示DevTools選中 Me 事件。

圖 15. Summary 視窗檢視關於 Me 函式回撥事件的更多資訊

DevTools中採用火焰圖表示主執行緒的主要活動。X軸代表記錄經過的時間。Y軸代表回撥棧資訊。位於上部的事件呼叫下部的事件。

圖 16. Main 視窗中顯示的火焰圖

圖16，一個 click 事件觸發了 script_foot_closure.js 檔案第53行定義的函式， Function Call 之後呼叫了一個匿名函式，匿名函式又呼叫了 Me() 函式， Me() 函式又呼叫了 Se() 函式等。

DevTools採用隨機的顏色標識指令碼資訊，如圖16中，指令碼中的一部分函式呼叫採用淺綠色標識，一部分函式採用米色標識。深黃色標識指令碼活動，紫色標識渲染事件。這些深黃色和紫色在整表示在整個記錄中都是一致的。

若想隱藏火焰圖中的JavaScript中呼叫的詳細資訊，請檢視前面介紹的 禁用JavaScript樣例功能 。若禁用JavaScript樣例功能，你只可以看到初始呼叫事件。比如，圖16中標識的 Event (click) 和 Function Call (script_foot_closure.js:53) 。

在表格中檢視活動

錄製結束後，利用 Main 視窗中資訊不是分析資料的唯一方式。DevTools另外提供了三種表格式分析活動方式，每種方式都是從不同的角度出發:

• 若想分析導致更多活動的根活動時模擬，可以採用 the Call Tree 。

• 若想分析那些活動佔用時間更多時，可以利用 the Bottom-Up 視窗。

• 若想按順序分析記錄中發生的活動時，可以利用 the Event Log 視窗。

注:接下來介紹的基於同一個例子進行分析，你可以自己執行該例子 Activity Tabs Demo ，並在 GoogleChrome/devtools-samples/perf/activitytabs.html 檢視原始碼。

根活動

接下來介紹如何使用 Call Tree ， Bottom-Up ， Event Log 區域分析根活動資訊。

根活動指的是瀏覽器觸發的一系列流程。例如，當你點選頁面內容，瀏覽器觸發一個 Event 作為根活動，該 Event 可能回撥一個事件處理事件。

在 Main 面板中的火焰圖中，根活動展示在上部，在 Call Tree 和 Event Log 面板中，根活動展示在頂層。

請檢視 The Call Tree 瞭解根活動相關例項。

Call Tree標籤頁

採用 Call Tree 標籤頁定位 根活動 。

Call Tree標籤頁中只展示記錄中被選中部分的活動資訊。 檢視 如何選中記錄中區域 一節瞭解選中方式。

圖 17. Call Tree 標籤頁

圖17表示中， Activity 列中顯示的 Event , Paint 和 Composite Layers 代表根活動。層級巢狀表示代表回撥棧。例如，圖17中 Event 呼叫 Function Call ,然後呼叫 button.addEventListener ，然後呼叫 b 等等。

Self Time表示對應活動消耗的時間， Total Time 表示對應活動以及子活動共同消耗的時間。

點選 Self Time ， Total Time 或者 Activity 表頭區域，可按對應列排序。

利用 Filter 輸入框區域，輸入活動名過濾事件。

Grouping分組選單預設為 No Grouping ，利用該功能可以根據不同的分類將活動進行分組。

點選右側 Show Heaviest Stack 在右側開啟另外一個活動資訊展示區。選中某一活動資訊將展示在 Heaviest Stack 區域中。 Heaviest Stack 區域展示當前選中活動中佔用時間最多的子活動資訊。

Bottom-Up 標籤頁

利用 Bottom-Up 標籤檢視佔用最多時間的活動。

Bottom-Up標籤頁僅顯示記錄中選中部分的活動。檢視 如何選中記錄中區域 一節瞭解選中方式。

圖 18. Bottom-Up 標籤頁

在圖18 Main 區域展示的火焰圖中，可以發現消耗時間最多的是三次呼叫了 wait() 函式。同理，在 Bottom-Up 標籤頁中第一個活動為 wait 。圖中 wait 區域下方的黃色區域為大量的 Minor GC 呼叫。同理，在 Bottom-Up 標籤頁中消耗時間次多的為 Minor GC 。

Self Time表示對應活動消耗的時間。

Total Time表示對應活動以及子活動共同消耗的時間。

Event Log標籤頁

Event Log標籤頁按順序展示記錄中發生的活動。

Event Log標籤頁僅顯示記錄中選中部分的活動。檢視 如何選中記錄中區域 一節瞭解選中方式。

圖 19. Event Log 標籤頁

Start Time列表示該項活動的開始時間，該時間相對於記錄開始時間計算。例如圖19中選中項開始時間為 1573.0 ms ，代表該活動在記錄開始之後 1573.0 ms 後開始。

Self Time表示對應活動消耗的時間。

Total Time表示對應活動以及子活動共同消耗的時間。

點選 Start Time 、 Total Time 、 Self Time 表頭區域，可按對應列排序。

利用 Filter 輸入框區域，輸入活動名過濾事件。

利用 Duration 下拉選單過濾消耗小於1ms或者小於15ms的活動。該選單預設選中 All 選項，展示所有活動。

利用 Loading ， Scripting , Rendering ， Painting 選項進行分類過濾。

檢視GPU活動

在 GPU 模組檢視GPU活動資訊

圖 20. GPU 模組為藍色選中區域

檢視柵格活動

在 Raster 模組檢視柵格活動資訊

圖 21. Raster 模組為藍色選中區域

檢視互動資訊

利用 Interactions 模組檢視並分析記錄過程中使用者的互動操作。

圖 22. Interactions 模組為藍色選中區域

單個互動操作若是標有紅色下劃線，代表當前主執行緒處於等待狀態。

點選單個互動操作，在 Summary 區域檢視更多相關資訊。

分析每秒傳輸幀數（FPS）

DevTools提供多種方式分析每秒傳輸幀數:

• 檢視 FPS 圖表 瞭解整個記錄中FPS的概況。

• Frames 模組檢視每一幀時間消耗。

• 利用 FPS meter 工具在頁面執行時實時檢視FPS資訊。請檢視 利用FPS meter實時監測FPS 瞭解更多。

FPS圖表

FPS圖表顯示了整個記錄過程中幀率的概況。圖表中綠色折線越高代表幀率越好。

FPS折線圖上測出現的紅色橫線為一條西能警示線，表示幀率低於該值會嚴重影響使用者體驗。

圖 20. FPS模組為藍色選中區域

Frames模組

Frames模組清晰表明每個幀消耗時間。

滑鼠在某一幀上懸停可以檢視更多詳細資訊。

圖 21. 特定幀滑鼠懸浮顯示更多資訊

單擊特定幀可以在 Summary 面板中檢視更多資訊。DevTools中藍框表示為當前選中幀。

圖 22. 利用 Summary 面板檢視特定幀更多資訊

網路請求

展開 Network 面板，記錄過程中發生的網路請求會以瀑布流的方式展現。

圖 23. Network 模組為藍色選中區域

請求根據型別用不同顏色表示如下:

• HTML: 藍色

• CSS: 紫色

• JS: 黃色

• Images: 綠色

單擊某個請求可在 Summary 面板中檢視更多資訊。如圖23中，展示了 Network 區域被選中的藍色請求的更多資訊。

左上角深藍色方格代表該請求有更高的優先順序。淺藍色代表請求有較低優先順序。例如圖23所示，被選中請求有較高優先順序，上側綠色請求有較低優先順序。

如圖24中，一個地址為 www.google.com 的請求左右起止點各用一條線表示，中間為一個柱形圖表，左右兩側用深淺顏色表示。圖25表示了在 Network 面板中 Timing 選項同一個請求應答訊息。下面介紹一下兩張圖相對應關係:

• 左側線代表 Connection Start 之前所有的事件資訊。概括說就是 Request Sent 之前的所有事情。

• 圖表的淺色區域代表 Request Sent 和 Waiting (TTFB) 。

• 圖表的神色區域代表 Content Download .

• 右側線代表等待主執行緒的時間。這個時間在 Timing 面板中不顯示。

圖 24. www.google.com 請求對應的圖表

圖 25. www.google.com 請求在 Timing 選項中的展示

檢視記憶體度量值

在錄製的記錄中，通過選中 Memory 選項開啟記憶體度量功能。

圖 26. 圖中藍色框標識區域為 Memory 功能開啟選項

DevTools在 Summary 面板上側顯示一個新的 Memory 圖表。在 NET 圖表下邊也顯示一個 HEAP 圖表。 HEAP 圖表提供的資訊同 Memory 面板中 JS Heap 提供的資訊相同。

圖 27. Summary 面板上側的記憶體度量區

圖中不同顏色的線條分別約上部不同顏色的選項框對應。選中或者取消選項框可以顯示或隱藏對應的圖表資訊。

圖表部分僅顯示當前選中記錄部分資訊。如圖27中， Memory 資訊圖表顯示範圍是從記錄開始到1000ms處。

檢視錄製部分的持續時間

當利用 Network 或者 Main 面板分析記錄時，有時可能需要評估特定事件的消耗時間。按住 Shift 鍵，滑鼠點選並左右拖拽選中記錄中的特定部分。在選中區域的下側，Devtools會顯示選中部分花費的時間。

圖 28. 選中區域下側顯示的 488.53ms 為該部分花費的時間

檢視螢幕快照

請檢視之前關於 如何抓取記錄中的螢幕快照 開啟該功能。

將滑鼠懸浮在包含 CPU , FPS 和 NET 圖表區域的 Overview 檢視上，可以檢視記錄某一時刻頁面對應的檢視快照。

圖 29. 檢視螢幕快照

還可以通過點選選中 Frames 區域某一幀，檢視對應的螢幕快照資訊。Devtools他在 Summary 面板顯示對應螢幕快照的縮圖。

圖 30. 選中 Frames 面板中 195.5ms 對應幀，在 Summary 面板顯示對應的螢幕快照

點選 Summary 視窗中的縮圖，可以檢視螢幕快照原圖。

圖 31. 點選 Summary 面板中的縮圖，檢視螢幕快照原圖

檢視圖層資訊

檢視幀的更多圖層資訊:

1. 開啟高階繪製工具 .

2. Frames區域中選中某一特定幀，開啟Devtools中的 Layers 視窗（與 Event Log 視窗相鄰）檢視更多圖層資訊。

圖 32. Layers 圖層視窗

在左側屬性圖中滑鼠懸浮在某一特定層級上可以高亮檢視對應圖層位置。

圖 33. 高亮顯示幀 #39

移動圖層的方式:

• 點選 Pan Mode 模式，可以在X/Y軸平移圖層。

• 點選 Rotate Mode 模式，可以在Z軸旋轉圖層。

• 點選 Reset Transform 重置圖層到初始狀態。

檢視繪製分析器

檢視繪製過程中的更多資訊:

1. 開啟高階繪製工具 .

2. 在 Main 面板中選中某一個 Paint 事件。

圖 34. Paint Profiler 視窗

利用Rendring面板分析渲染效能

利用 Rendering 視窗功能分析頁面渲染效能。

開啟 Rendering 視窗的方式:

1. 開啟 Command Menu .

2. 輸入 Rendering 並選擇 Show Rendering 。（或者點選右側三個點選單選擇More Tools—>rendering）DevTools會在視窗下邊顯示rendering面板。

圖 35. Rendering 視窗

利用FPS meter分析器實時檢視每秒的幀資訊

FPS meter以遮罩層的形式出現在視窗的右上角。可以實時顯示頁面執行時的FPS。開啟 FPS meter 方法如下:

1. 開啟 Rendering 視窗。 開啟方式請檢視 利用Rendering工具分析效能 。

2. 選中 FPS Meter 選項。

圖 36. FPS meter視窗示意圖

利用Paint Flashing實時檢視頁面繪製事件

採用Paint Flashing顯示頁面中實時繪製事件。當頁面中某一個部分發生了重繪，DevTools 會將其標識為綠色。

開啟Paint Flashing功能:

1. 開啟 Rendering 視窗。 開啟方式請檢視 利用Rendering工具分析效能 。

2. 選中Paint Flashing選項

圖 37. Paint Flashing 效果

利用Layer Borders檢視層級覆蓋範圍

利用 Layer Borders 檢視區域的邊框和頁面中均勻劃分的標尺線。

開啟Layer Borders功能:

1. 開啟 Rendering 視窗。 開啟方式請檢視 利用Rendering工具分析效能 。

2. 選中 Layer Borders 選項。

圖 38. Layer Borders 效果

請檢視 debug_colors.cc 中的介紹瞭解關於彩色編碼的內容。

實時發現滾動效能問題

頁面中一些元素對滾動事件進行了監聽處理，該方式可能會影響頁面效能，通過檢視頁面滾動性幫助發現此類問題。DevTools將可能存在該問題的元素用青色標識。

發現滾動效能問題的方法:

1. 開啟 Rendering 視窗。 開啟方式請檢視 利用Rendering工具分析效能 。

2. 選中Scrolling Performance Issues選項

圖 39. mousewheel 監聽處理整個視窗事件會導致 滾動效能問題