分析執行階段效能

Kayce Basques

注意：請參閱「最佳化網站速度」一文，瞭解如何加快網頁載入速度。

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

注意：本教學課程是以 Chrome 59 為基礎。如果您使用的是其他 Chrome 版本，開發人員工具的 UI 和功能可能會有所不同。查看 chrome://help，瞭解您目前使用的 Chrome 版本。

開始使用

在本教學課程中，您將在線上頁面上開啟開發人員工具，並使用「效能」面板，在頁面上找出效能瓶頸。

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

2. 在無痕視窗中載入下方網頁。這是您要剖析的試用版。該頁面顯示了許多藍色小方塊，上面會上下移動。

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

3. 按下 Command + Option + I 鍵 (Mac) 或 Control + Shift + I 鍵 (Windows、Linux) 即可開啟開發人員工具。

   

   圖 1：左側示範和右側的開發人員工具

   注意：如要查看螢幕截圖的其他部分，開發人員工具會取消綁定至另一個視窗，方便你清楚查看內容。

模擬行動 CPU

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

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

4. 在「CPU」部分，選取「2x speeddown」。開發人員工具會節流 CPU，讓 CPU 速度比平常慢 2 倍。

   

   圖 2：藍色外框，CPU 節流

   注意：測試其他網頁時，如要確保網頁在低階行動裝置上都能正常運作，請將 CPU 節流功能設為「速度降低 20 倍」。這個示範在降低 20 倍變速的效果並不好，因此只是在進行教學時只會使用 2 倍減速。

設定示範模式

網站的所有讀者建立一致的執行階段效能示範並不容易。本節可讓您自訂示範內容，確保您的體驗與本教學課程中看到的螢幕截圖和說明相對一致，無論您的特定設定為何。

1. 繼續點選「新增 10」，直到藍色方塊的移動速度明顯低於先前。在高階機器上，可能需要大約 20 次點擊。

2. 按一下「最佳化」。藍色方塊應該會更快速、更平穩。

   注意：如果最佳化版本和未最佳化版本之間沒有明顯的差異，請試著點選「減去 10」數次，然後再試一次。如果新增過多藍色正方形，則會達到 CPU 上限，兩個版本的結果不會出現顯著差異。

3. 按一下「取消最佳化」。藍色方塊移動速度較慢，而且卡頓狀況更多。

記錄執行階段效能

執行最佳化的網頁版本時，藍色方塊的速度會變快。Why is that? 這兩個版本應在同一時間範圍內移動相同數量的空間。只要在「Performance」(效能) 面板中執行錄製作業，即可瞭解如何在未最佳化版本中偵測效能瓶頸。

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

   

   圖 3：剖析頁面

2. 稍等幾秒鐘。

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

   

   圖 4：設定檔結果

哇，這樣的資料量實在驚人了。別擔心，不久後就會更合理。

分析結果

取得網頁效能的記錄後，您就可以評估網頁效能不佳的程度並找出原因。

每秒分析影格數

測量任何動畫效能的主要指標是每秒影格數 (FPS)。如果動畫以每秒 60 個影格數執行，使用者就會感到不快。

1. 查看「FPS」圖表。每當 FPS 上方顯示紅色長條時，代表影格速率降低到極低，可能會影響使用者體驗。一般來說，綠色長條越高， FPS 就越高。

   

   圖 5：每秒影格數圖表 (以藍色呈現)

2. 系統會在「FPS」圖表下方顯示 CPU 圖表。CPU 圖表的顏色對應於「效能」面板底部的「Summary」分頁標籤中的顏色。根據 CPU 圖表是全彩圖表時， CPU 在記錄期間的最大值。每當 CPU 長時間用盡時，這是提示，設法減少工作量的方法。

   

   圖 6：CPU 圖表和「摘要」分頁，以藍色外框呈現

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

   

   圖 7：查看錄製長度約 2000 毫秒的頁面螢幕截圖

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

   

   圖 8：將滑鼠遊標懸停在影格上

但在這個示範中，我們很明顯發現該網頁的成效不如預期。但實際上，實際上並非如此，所以我們運用上述所有工具，才能有效進行測量。

額外獎勵：開啟 FPS 計量器

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

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

3. 在「Rendering」分頁中，啟用「FPS Meter」。新疊加層會顯示在可視區域的右上方。

   

   圖 9： FPS 計量器

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

找出瓶頸

現在您已評估並驗證動畫成效不佳，接下來要回答的問題是：為什麼？

1. 請注意摘要分頁。如未選取事件，這個分頁會顯示活動細目。網頁大部分時間轉譯。由於效能是減少工作工作的藝術，因此您的目標是減少轉譯工作所花費的時間。

   

   圖 10：「摘要」分頁，以藍色外框呈現

2. 展開「Main」(主要) 部分。開發人員工具會顯示您一段時間內主執行緒上的活動的火焰圖。X 軸代表隨時間變化的記錄。每個長條都代表一個事件。長條越寬，表示事件花費的時間越長。y 軸代表呼叫堆疊。如果事件互相堆疊，表示優先順序較高事件導致較低事件。

   

   圖 11：藍色輪廓主要部分

3. 記錄中有很多資料。按一下、按住並拖曳滑鼠遊標的「總覽」(包含「FPS」、「CPU」和「NET」圖表區段)，就可放大單一「已觸發動畫頁框」事件。「Main」區段和「Summary」分頁只會顯示錄音中所選部分的資訊。

   

   圖 12：放大單一動畫頁框事件

   注意：另一種縮放方式，是將焦點移至「Main」(主要) 部分，方法是按一下背景或選取事件，然後按下 W、A、S 和 D 鍵。

4. 請注意，「已觸發動畫頁框」事件右上方的紅色三角形。每當您看到紅色三角形時，系統會發出警告，表示該事件可能發生問題。

   注意：每次執行 requestAnimationFrame() 回呼時，都會發生「Animation Frame Fired」事件。

5. 按一下「Animation Frame Fired」事件。「Summary」分頁現在會顯示該事件的相關資訊。記下顯示連結。按一下之後，開發人員工具會醒目顯示啟動「Animation Frame Fired」事件的事件。另請記下 app.js:94 連結。您只要按一下該圖示，即可前往原始碼中的相關行。

   

   圖 13：更多關於動畫框架觸發事件的資訊

   注意：選取活動後，請使用方向鍵選取活動旁的事件。

6. app.update 事件下方有兩個紫色事件。如果範圍較寬，看起來會像是每個 都有一個紅色三角形立即點選紫色的其中一個「Layout」事件。開發人員工具會在「Summary」分頁中提供事件的詳細資訊。事實上，強制重排 (版面配置的另一個字) 則是強制重排的警告。

7. 在「Summary」分頁中，按一下「Layout Forced」下方的「app.js:70」連結。開發人員工具會將您帶往強制該版面配置的程式碼行。

   

   圖 13：導致強製版面配置的程式碼行

   注意：程式碼的問題是，在每個動畫影格中，會變更每個正方形的樣式，然後查詢頁面上每個正方形的位置。由於樣式有所變更，瀏覽器就無法知道每個正方形的位置是否有所變更，因此必須重新安排正方形的版面配置才能計算位置。詳情請參閱「避免使用強制同步版面配置」。

大功告成！要瞭解這部分的內容已經相當複雜，但我們在分析執行階段效能的基本工作流程中已有穩固的基礎。做得好！

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

使用剛學到的工作流程和工具。在試用版上按一下「最佳化工具」，即可啟用最佳化的程式碼、進行另一次效能記錄，然後分析結果。從改善的影格速率到「Main」(主要) 區段火焰圖中的事件減少，您可以看到最佳化版本的應用程式的工作較少，進而增進效能。

注意：即使這個最佳化版本並非棒，它仍會處理每個正方形的 top 屬性。建議您採用只影響合成的屬性。詳情請參閱「使用動畫的轉換和不透明度變更」。

後續步驟

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

為了熟悉「效能」面板的使用位置，請多加練習，請嘗試剖析您自己的網頁並分析結果。如果您對結果有任何疑問，請開啟標有 google-chrome-devtools 的 Stack Overflow 問題。請盡可能附上可重現網頁的螢幕截圖或連結。

要成為執行階段效能的專家，您必須瞭解瀏覽器如何將 HTML、CSS 和 JS 轉譯成畫面上的像素。建議您先參閱轉譯效能總覽。The Anatomy Of A Frame..

最後，有很多方法可以改善執行階段效能。本教學課程著重於單一動畫瓶頸，提供「效能」面板的深入導覽，但這只是您遇到的許多瓶頸之一。其他「轉譯效能」系列提供許多改善執行階段效能的實用訣竅，例如：

• 最佳化 JS 執行
• 降低樣式計算作業的範圍和複雜度
• 避免大型、複雜的版面配置和版面配置異常終止
• 簡化繪製複雜度並減少繪製區域
• 勾選至僅限合成的屬性及管理圖層計數
• 拆卸輸入處理常式