分析執行階段效能

Kayce Basques

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

開始使用

在這個教學課程中，我們會使用「效能」面板找出實際網頁中的效能瓶頸。步驟如下：

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

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

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

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

    左側為示範，右側為 DevTools。

模擬行動 CPU

行動裝置的 CPU 效能比桌上型電腦和筆記型電腦低許多。每次剖析網頁時，請使用 CPU 節流功能模擬網頁在行動裝置上的效能。

  1. 在「開發人員工具」中，按一下「效能」分頁標籤。
  2. 確認已啟用「螢幕截圖」核取方塊。
  3. 按一下「擷取設定」。開發人員工具會顯示與如何擷取成效指標相關的設定。

  4. 在「CPU」部分，選取「4 倍慢速」。開發人員工具會限制 CPU 速度，使其比平常慢 4 倍。

    CPU 節流速度設為 4 倍變慢。

設定示範

很難建立能讓本網站所有讀者都能一致體驗的執行階段效能示範。本節將讓您自訂示範，確保您的體驗與本教學課程中的螢幕截圖和說明大致一致，無論您採用何種特定設定皆然。

  1. 持續點選「新增 10」，直到藍色方塊變慢明顯變慢為止。在高階機器上，大約需要 20 次點擊。

  2. 按一下「最佳化」。藍色方塊的移動速度應該會變快，且移動過程更流暢。

  3. 按一下「取消最佳化」。藍色方塊移動速度較慢，且卡頓情形也會越多。

記錄執行階段效能

執行最佳化的網頁版本時，藍色方塊會移動速度更快。為什麼會這樣？這兩個版本在相同時間內移動每個正方形應相等的空間大小。在「Performance」(效能) 面板中錄影，瞭解如何偵測未最佳化版本的效能瓶頸。

  1. 在開發人員工具中，按一下「Record」。開發人員工具會在頁面執行時擷取成效指標。

    為示範頁面進行剖析。

  2. 稍等幾秒鐘。

  3. 按一下「停止」。開發人員工具會停止錄製並處理資料，然後在「Performance」面板中顯示結果。

    剖析報告頁面。

包含的資料量過多別擔心，很快就會變得更容易理解。

分析結果

取得效能記錄後，您就可以分析網頁效能是否不佳，並找出原因。

分析每秒影格數

評估任何動畫效能的其中一個主要指標，就是每秒影格數 (FPS)。動畫以 60 FPS 的速度執行時，使用者會感到滿意。

  1. 查看「FPS」圖表。只要在 FPS 上方看到紅色長條，就表示影格速率降得太低，可能會影響使用者體驗。

    畫面更新率圖表已醒目顯示。

  2. 在「FPS」圖表下方，您會看到「CPU」圖表。「CPU」圖表中的顏色，會與「成效」面板底部的「摘要」分頁中的顏色相符。CPU 圖表的顏色填滿，表示 CPU 在錄製期間達到上限。每當您發現 CPU 長時間達到上限，就表示您需要想辦法減少工作量。

    CPU 圖表和「摘要」分頁。

  3. 將滑鼠游標懸停在「FPS」、「CPU」或「NET」圖表上。開發人員工具會顯示該時間點的網頁螢幕截圖。左右移動滑鼠即可重播錄音。這稱為「快速瀏覽」，可用於手動分析動畫的進度。

    在成效錄影中查看螢幕截圖。

  4. 在「頁框」部分中，將滑鼠遊標懸停在其中一個綠色方塊上。開發人員工具會顯示該特定影格 FPS。每個影格可能遠低於 60 FPS 的目標。

    將滑鼠游標懸停在框架上。

當然，透過這個範例，您可以清楚看出網頁的成效不佳。但在實際情況中，情況可能不那麼明確，因此擁有這些評估工具就很方便。

額外獎勵：開啟 FPS 計量器

另一個實用的工具是 FPS 計量器，可在網頁執行時提供 FPS 的即時預估值。

  1. 按下 Command + Shift + P 鍵 (Mac) 或 Control + Shift + P 鍵 (Windows、Linux) 即可開啟指令選單。
  2. 在指令選單中開始輸入 Rendering，然後選取「Show Rendering」。

  3. 在「算繪」面板中，啟用「顯示轉譯統計資料」。視區範圍的右上方會顯示新的疊加層。

    FPS 公尺。

  4. 停用 FPS Meter 然後按下 Escape 鍵，關閉「Rendering」面板。您不會在本教學課程中使用它。

找出瓶頸

您已經評估並確認動畫效能不佳，接下來要回答的問題是：為什麼？

  1. 注意「摘要」分頁。如果未選取任何事件，這個分頁會顯示活動細目。網頁大部分時間轉譯。效能是指減少工作量，因此您的目標是減少算繪工作所需的時間。

    以藍色標示的「摘要」分頁。

  2. 展開「Main」部分。開發人員工具會顯示主要執行緒上活動的火焰圖，並隨時間變化。X 軸代表錄音內容，每個長條都代表一項活動。較寬的長條表示事件花費的時間較長。y 軸代表呼叫堆疊。如果您看到事件疊放顯示，表示上方事件導致下方事件。

    「Main」部分。

  3. 錄製內容中含有大量資料。如要放大單一「Animation Frame Fired」事件，請按住滑鼠並拖曳至「Overview」，這是包含「FPS」、「CPU」和「NET」圖表的部分。「Main」部分和「Summary」分頁只會顯示所選記錄檔的部分資訊。

    放大顯示單一動畫影格觸發事件。

  4. 請注意，「Task」和版面配置事件右上方的紅色三角形。只要看到紅色三角形，就表示系統發出警告，表示與這項活動相關的問題。如果工作上顯示紅色三角形，表示該工作是長時間工作。

  5. 按一下「Animation Frame Fired」事件。「摘要」分頁現在會顯示該事件的相關資訊。按一下「Initiated by」旁的連結，DevTools 就會醒目顯示觸發「Animation Frame Fired」事件的事件。請注意 app.update @ 連結。按一下該連結即可跳至原始碼中的相關行。

    進一步瞭解「Animation Frame Fired」事件。

  6. 在 app.update 事件下方，有許多紫色的事件。如果寬度變大 看起來會有一個紅色三角形請現在按一下其中一個紫色「版面配置」事件。開發人員工具會在「Summary」分頁中提供事件的詳細資訊。事實上，系統會發出警告，指出強制重新流動的情況 (另一種說法是版面配置)。

  7. 在「Summary」分頁中，按一下「First Layout Invalidation」下方「app.update @」旁的連結。開發人員工具會帶您前往強制版面配置的程式碼行。

    造成強制版面配置的程式碼行。

大功告成！這部分內容相當豐富，但您現在已掌握了分析執行階段效能的基礎工作流程。做得好！

額外步驟：分析最佳化版本

使用剛學到的作業流程和工具，在範例中按一下「Optimize」，啟用經過最佳化的程式碼，再進行另一次效能記錄，然後分析結果。從「Main」部分的火焰圖表中，您可以看到經過最佳化處理的應用程式版本所執行的工作量減少許多，因此效能也提升了。

後續步驟

RAIL 模型是瞭解效能的基礎。這個模型會教您使用者最重視的成效指標。詳情請參閱「使用 RAIL 模型評估成效」。

熟能生巧，您可以多加練習，更熟悉「成效」面板。嘗試分析自己的網頁並分析結果。如果您對結果有任何疑問，請在 Stack Overflow 中提出標記為 google-chrome-devtools 的問題。可以的話，請附上螢幕擷取畫面或可重現網頁的連結。

如要成為執行階段效能專家，您必須瞭解瀏覽器如何將 HTML、CSS 和 JS 轉譯為螢幕上的像素。建議您從「轉譯效能總覽」著手。The Anatomy Of A Frame 進一步深入探討。

最後，您可以透過多種方式改善執行階段效能。本教學課程著重於單一動畫瓶頸，讓您專注於瞭解「效能」面板，但這只是您可能遇到的眾多瓶頸之一。在「算繪效能」系列的其他文章中，您可以找到許多實用訣竅，協助改善執行階段效能的各個面向，例如：