執行階段效能是指網頁在執行時 (而非載入) 時的效能。本教學課程說明如何使用 Chrome 開發人員工具效能面板來分析執行階段效能。在 RAIL 模型方面，您在本教學課程中學到的技能對於分析頁面的「回應」、「動畫」和「閒置」階段相當實用。
開始使用
在本教學課程中，您將在線上頁面上開啟開發人員工具，並使用「效能」面板，在頁面上找出效能瓶頸。
- 在無痕模式下開啟 Google Chrome。無痕模式可確保 Chrome 以乾淨的狀態執行，舉例來說，如果您安裝了大量擴充功能，這些擴充功能可能會在效能評估中造成雜訊。
在無痕視窗中載入下方網頁。這是您要剖析的試用版。該頁面顯示了許多藍色小方塊，上面會上下移動。
https://googlechrome.github.io/devtools-samples/jank/按下 Command + Option + I 鍵 (Mac) 或 Control + Shift + I 鍵 (Windows、Linux) 即可開啟開發人員工具。
圖 1：左側示範和右側的開發人員工具
模擬行動 CPU
行動裝置的 CPU 效能比桌上型電腦和筆記型電腦低很多。剖析網頁時，使用 CPU 節流功能模擬網頁在行動裝置上的效能。
- 在開發人員工具中按一下「效能」分頁標籤。
- 確認「螢幕截圖」核取方塊已啟用。
- 按一下「Capture Settings」圖示
。開發人員工具會顯示有關擷取成效指標的設定。 在「CPU」部分，選取「2x speeddown」。開發人員工具會節流 CPU，讓 CPU 速度比平常慢 2 倍。
圖 2：藍色外框，CPU 節流
設定示範模式
網站的所有讀者建立一致的執行階段效能示範並不容易。本節可讓您自訂示範內容，確保您的體驗與本教學課程中看到的螢幕截圖和說明相對一致，無論您的特定設定為何。
- 繼續點選「新增 10」，直到藍色方塊的移動速度明顯低於先前。在高階機器上，可能需要大約 20 次點擊。
按一下「最佳化」。藍色方塊應該會更快速、更平穩。
按一下「取消最佳化」。藍色方塊移動速度較慢，而且卡頓狀況更多。
記錄執行階段效能
執行最佳化的網頁版本時，藍色方塊的速度會變快。Why is that? 這兩個版本應在同一時間範圍內移動相同數量的空間。只要在「Performance」(效能) 面板中執行錄製作業，即可瞭解如何在未最佳化版本中偵測效能瓶頸。
在開發人員工具中，按一下「Record」圖示
。開發人員工具會在頁面執行時擷取成效指標。
圖 3：剖析頁面
稍等幾秒鐘。
按一下「停止」。開發人員工具會停止記錄、處理資料，並在「效能」面板中顯示結果。
圖 4：設定檔結果
哇，這樣的資料量實在驚人了。別擔心，不久後就會更合理。
分析結果
取得網頁效能的記錄後，您就可以評估網頁效能不佳的程度並找出原因。
每秒分析影格數
測量任何動畫效能的主要指標是每秒影格數 (FPS)。如果動畫以每秒 60 個影格數執行，使用者就會感到不快。
查看「FPS」圖表。每當 FPS 上方顯示紅色長條時，代表影格速率降低到極低，可能會影響使用者體驗。一般來說，綠色長條越高， FPS 就越高。
圖 5：每秒影格數圖表 (以藍色呈現)
系統會在「FPS」圖表下方顯示 CPU 圖表。CPU 圖表的顏色對應於「效能」面板底部的「Summary」分頁標籤中的顏色。根據 CPU 圖表是全彩圖表時， CPU 在記錄期間的最大值。每當 CPU 長時間用盡時，這是提示，設法減少工作量的方法。
圖 6：CPU 圖表和「摘要」分頁，以藍色外框呈現
將滑鼠遊標懸停在「FPS」、「CPU」或「NET」圖表上。開發人員工具會顯示該時間點的網頁螢幕截圖。左右移動滑鼠即可重播錄製內容。這種做法稱為拖曳，用於手動分析動畫進度。
圖 7：查看錄製長度約 2000 毫秒的頁面螢幕截圖
在「Frames」部分中，將滑鼠遊標懸停在其中一個綠色方塊上。開發人員工具會顯示該特定影格的每秒影格數。每個影格可能都遠低於 60 FPS 的目標。
圖 8：將滑鼠遊標懸停在影格上
但在這個示範中，我們很明顯發現該網頁的成效不如預期。但實際上，實際上並非如此，所以我們運用上述所有工具，才能有效進行測量。
額外獎勵：開啟 FPS 計量器
另一項便利工具是 FPS 計量器，可在網頁執行時提供 FPS 的即時預估值。
- 按下 Command + Shift + P 鍵 (Mac) 或 Control+Shift+P 鍵 (Windows、Linux)，開啟指令選單。
- 開始在「Command」選單中輸入
Rendering，然後選取「Show Rendering」。 在「Rendering」分頁中，啟用「FPS Meter」。新疊加層會顯示在可視區域的右上方。
圖 9： FPS 計量器
停用 FPS Meter，然後按下 Escape 鍵即可關閉「Rendering」分頁。您不會在本教學課程中使用它。
找出瓶頸
現在您已評估並驗證動畫成效不佳，接下來要回答的問題是：為什麼？
請注意摘要分頁。如未選取事件，這個分頁會顯示活動細目。網頁大部分時間轉譯。由於效能是減少工作工作的藝術，因此您的目標是減少轉譯工作所花費的時間。
圖 10：「摘要」分頁，以藍色外框呈現
展開「Main」(主要) 部分。開發人員工具會顯示您一段時間內主執行緒上的活動的火焰圖。X 軸代表隨時間變化的記錄。每個長條都代表一個事件。長條越寬，表示事件花費的時間越長。y 軸代表呼叫堆疊。如果事件互相堆疊，表示優先順序較高事件導致較低事件。
圖 11：藍色輪廓主要部分
記錄中有很多資料。按一下、按住並拖曳滑鼠遊標的「總覽」(包含「FPS」、「CPU」和「NET」圖表區段)，就可放大單一「已觸發動畫頁框」事件。「Main」區段和「Summary」分頁只會顯示錄音中所選部分的資訊。
圖 12：放大單一動畫頁框事件
請注意，「已觸發動畫頁框」事件右上方的紅色三角形。每當您看到紅色三角形時，系統會發出警告，表示該事件可能發生問題。
按一下「Animation Frame Fired」事件。「Summary」分頁現在會顯示該事件的相關資訊。記下顯示連結。按一下之後，開發人員工具會醒目顯示啟動「Animation Frame Fired」事件的事件。另請記下 app.js:94 連結。您只要按一下該圖示，即可前往原始碼中的相關行。
圖 13：更多關於動畫框架觸發事件的資訊
app.update 事件下方有兩個紫色事件。如果範圍較寬，看起來會像是每個 都有一個紅色三角形立即點選紫色的其中一個「Layout」事件。開發人員工具會在「Summary」分頁中提供事件的詳細資訊。事實上，強制重排 (版面配置的另一個字) 則是強制重排的警告。
在「Summary」分頁中，按一下「Layout Forced」下方的「app.js:70」連結。開發人員工具會將您帶往強制該版面配置的程式碼行。
圖 13：導致強製版面配置的程式碼行
大功告成！要瞭解這部分的內容已經相當複雜，但我們在分析執行階段效能的基本工作流程中已有穩固的基礎。做得好！
額外步驟：分析最佳化的版本
使用剛學到的工作流程和工具。在試用版上按一下「最佳化工具」，即可啟用最佳化的程式碼、進行另一次效能記錄，然後分析結果。從改善的影格速率到「Main」(主要) 區段火焰圖中的事件減少，您可以看到最佳化版本的應用程式的工作較少，進而增進效能。
後續步驟
瞭解效能的基礎是 RAIL 模型。這個模型會介紹使用者最重視的成效指標。詳情請參閱「使用 RAIL 模型評估效能」。
為了熟悉「效能」面板的使用位置，請多加練習，請嘗試剖析您自己的網頁並分析結果。如果您對結果有任何疑問，請開啟標有 google-chrome-devtools 的 Stack Overflow 問題。請盡可能附上可重現網頁的螢幕截圖或連結。
要成為執行階段效能的專家，您必須瞭解瀏覽器如何將 HTML、CSS 和 JS 轉譯成畫面上的像素。建議您先參閱轉譯效能總覽。The Anatomy Of A Frame..
最後，有很多方法可以改善執行階段效能。本教學課程著重於單一動畫瓶頸，提供「效能」面板的深入導覽，但這只是您遇到的許多瓶頸之一。其他「轉譯效能」系列提供許多改善執行階段效能的實用訣竅，例如：