分析執行階段效能

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

開始使用

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

  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 倍。

    CPU 節流

    圖 2:藍色外框,CPU 節流

設定示範模式

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

  1. 繼續點選「新增 10」,直到藍色方塊的移動速度明顯低於先前。在高階機器上,可能需要大約 20 次點擊。
  2. 按一下「最佳化」。藍色方塊應該會更快速、更平穩。

  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 長時間用盡時,這是提示,設法減少工作量的方法。

    CPU 圖表和「Summary」分頁

    圖 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」。新疊加層會顯示在可視區域的右上方。

    FPS 公尺

    圖 9: FPS 計量器

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

找出瓶頸

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

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

    「摘要」分頁

    圖 10:「摘要」分頁,以藍色外框呈現

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

    「主要」部分

    圖 11:藍色輪廓主要部分

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

    放大單一「動畫頁框」事件

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

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

  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」(主要) 區段火焰圖中的事件減少,您可以看到最佳化版本的應用程式的工作較少,進而增進效能。

後續步驟

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

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

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

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