Chrome 開發者工具 —— Performance 使用參考

原文連接： https://developers.google.com...
相關文章： https://github.com/hewq/blog/...

Disable JavaScript Samples

• 默認狀況下，Main 部分會詳細記錄 JavaScript 的調用堆棧，使用 Disable JavaScript Samples 能夠隱藏這些調用。像一些自定義的函數調用會被隱藏。下圖爲隱藏前和隱藏後的比較

查看主線程

• Main 部分記錄了主線程的活動點擊其中一個事件，在 Summary 面板中查看更詳細的信息

DevTools 用火焰圖表示主線程的活動。x 軸表示隨時間的記錄，y 軸表示調用的事件。上層的事件調用（觸發）了下層的事件（anonymous表明匿名函數）

Call Tree

• 使用 Call Tree 來查看哪一個根事件花費的時間最多。Call Tree 只顯示選中部分的記錄。
• Self Time 表示直接花費在該事件上的時間，Total Time 表示花費在該事件及其全部後代（子孫）事件的總時間。
• 默認狀況下，分組菜單設置爲無分組，使用分組菜單能夠根據各類標準對活動表進行排序。
• 點擊 Show Heaviest Stack

會顯示所選事件中哪些子事件執行時間最長。

Bottom-Up

• 使用 Bottom-Up 能夠查看哪些活動在整體上佔用了最多的時間。Bottom-Up 只顯示選中部分的記錄。

在上圖的火焰圖中能夠看出幾乎全部的時間都花在三個對wait的調用上，因此 Bottom-Up 中，最頂部的是wait；wait調用下面的黃色部分實際上是數以千計的 GC（垃圾回收） 調用，因此下一個開銷最大的是Minor GC。

• Self Time 表示直接花費在該事件上的時間，Total Time 表示花費在該事件及其全部後代（子孫）事件的總時間。

Event Log

• 使用 Event Log 能夠按時間順序查看事件的執行
• Start Time 表示相對於記錄的開始時間，例如圖中的1573.0ms 表示該事件在記錄開始後的 1573 毫秒後被執行。
• Self Time 表示直接花費在該事件上的時間，Total Time 表示花費在該事件及其全部後代（子孫）事件的總時間。

Interactions

• 使用 Interactions 來分析記錄過程當中發生的用戶交互。底部的紅線表示等待主線程所花費的時間。

Memory

• 啓用 Memory 能夠查看記錄過程當中的內存使用狀況。

Enable advanced paint instrumentation

• 啓用 Enable advanced paint instrumentation，在 Main 中點擊 Paint，Paint Profiler 面板會顯示有關繪製事件的高級信息