分析執行階段效能

Kayce Basques
Kayce Basques
X GitHub

執行階段效能是指網頁在執行時的效能，而非載入時的效能。本教學課程將說明如何使用 Chrome 開發人員工具的「效能」面板，分析執行階段效能。就 RAIL 模型而言，您在本教學課程中學到的技巧，可用於分析網頁的回應、動畫和閒置階段。

開始使用

在本教學課程中，我們將使用「Performance」面板，找出網頁上存在的效能瓶頸。步驟如下：

  1. 以無痕模式開啟 Google Chrome。無痕模式可確保 Chrome 在乾淨的狀態下執行。舉例來說，如果您安裝了許多擴充功能，這些擴充功能可能會在效能評估中造成雜訊。

  2. 在無痕視窗中載入下列網頁。這是您要剖析的示範內容。這個頁面會顯示一堆上下移動的小藍色方塊。

    https://googlechrome.github.io/devtools-samples/jank/

  3. 按下 Command + Option + I 鍵 (Mac) 或 Control + Shift + I 鍵 (Windows、Linux) 即可開啟 DevTools。