在重新計算樣式事件期間分析 CSS 選取器成效

Sofia Emelianova
Sofia Emelianova

「Performance」面板會在右上角以紅色三角標示長時間執行的工作,並在「Summary」分頁中顯示警告,指出主執行緒的工作需要很長的時間才能執行,且效能緩慢:

在「摘要」分頁中,長時間的工作會標示為紅色三角形和警告。

在效能記錄中,部分耗時較長的作業可能是「重新計算樣式」事件。「Recalculate Style」事件會追蹤瀏覽器執行下列操作所需的時間:

  • 逐一檢查網頁上的 DOM 元素,找出與特定元素相符的所有 CSS 樣式規則。
  • 根據相符的 CSS 樣式規則,計算每個元素的實際樣式。

每當 CSS 規則的適用性可能有所變更時,就需要重新計算 CSS 樣式,例如:

  • 元素會新增至 DOM 或從中移除。
  • 元素的屬性有所變更,例如類別或 ID 屬性的值。
  • 使用者輸入內容,例如滑鼠移動或變更元素焦點,這可能會影響 :hover 規則。

長時間執行的 Recalculate Style 事件可能會影響效能,並導致呈現時間延遲,進而影響網站的Interaction to Next Paint (INP)。如果發現「Recalculate Style」事件執行時間過長,您可以使用「Selector Stats」分頁,瞭解哪些 CSS 選取器耗費最多時間,並導致效能變慢。

「選取器統計資料」分頁提供效能記錄中一或多個「重新計算樣式」事件所涉及 CSS 規則選取器的統計資料。

開啟選取器統計資料,記錄效能追蹤記錄

如要在長時間執行的 Recalculate Style 事件期間查看 CSS 規則選取器的統計資料,請開啟「Selector Stats」擷取設定,並記錄效能追蹤記錄。

如要記錄含有選取器統計資料的效能追蹤記錄,請按照下列步驟操作:

  1. 開啟網頁,例如相片庫示範頁面

  2. 開啟開發人員工具,然後前往「Performance」面板。

  3. 在「成效」面板中,按一下「設定」「擷取設定」按鈕,然後勾選「啟用 CSS 選取器統計資料」

    勾選「啟用 CSS 選取器統計資料」設定。

  4. 按一下「已勾選」「錄製」,執行要改善的情況,然後按一下「停止」

接著,請查看 CSS 選取器統計資料,如後續章節所述。

查看單一事件的 CSS 規則選取器統計資料

如要查看單一「重新計算樣式」事件中涉及的 CSS 規則選取器統計資料,請按照下列步驟操作:

  1. 開啟選取器統計資料,記錄效能追蹤記錄

  2. 在成效記錄中找出「Recalculate Style」事件,然後按一下該事件。

  3. 在「成效」面板的底部,開啟「選取器統計資料」分頁。

「選取器統計資料」分頁。

「Selector Stats」分頁中的 CSS 選取器表格

「Selector Stats」分頁包含 CSS 選取器的資料表。表格會針對每個 CSS 選取器顯示下列資訊:

說明
經過時間 (毫秒) 瀏覽器比對此 CSS 選取器所花費的時間。這段時間以毫秒 (ms) 為單位,其中 1 毫秒等於 1/1000 秒。
嘗試比對次數 瀏覽器引擎嘗試與此 CSS 選取器比對的元素數量。
相符項目數 瀏覽器引擎與此 CSS 選取器相符的元素數量。
慢速路徑不相符的百分比 與此 CSS 選取器不相符的元素,與瀏覽器引擎嘗試比對的元素比率,且需要瀏覽器引擎使用較不經過最佳化的程式碼進行比對。
選取器 已比對的 CSS 選取器。
CSS 樣式表 包含 CSS 選取器的 CSS 樣式表單。

完成後,請在「效能」面板中開啟「設定」,然後取消勾選「啟用 CSS 選取器統計資料」核取方塊。

查看多個事件的 CSS 規則選取器統計資料

如要查看多個「Recalculate Style」事件涉及的 CSS 規則選取器的匯總統計資料,請將多個「Selector Stats」表複製到試算表中,如下所示:

  1. 開啟選取器統計資料,記錄效能追蹤記錄

  2. 找出您想瞭解的第一個「Recalculate Style」事件,然後按一下該事件。

  3. 在「成效」面板的底部,開啟「選取器統計資料」分頁。

  4. 在選取器統計資料表上按一下滑鼠右鍵,然後選取「複製表格」

    下拉式選單中的「複製表格」選項。

  5. 將表格貼到 Google 試算表等試算表中。

  6. 針對感興趣的其他「Recalculate Style」事件重複執行上述步驟。

完成後,請在「效能」面板中開啟「設定」,然後取消勾選「啟用 CSS 選取器統計資料」核取方塊。

查看完整錄製內容的 CSS 規則選取器匯總統計資料

如要查看整個效能記錄中涉及的 CSS 規則選取器的匯總統計資料,請按照下列步驟操作:

  1. 開啟選取器統計資料,記錄效能追蹤記錄

  2. 按一下火焰圖表的空白區域,取消選取任何可能選取的事件。

  3. 選取整個錄音範圍。如要這麼做,請在「Performance」面板頂端,按兩下 CPU 圖表。

  4. 在「成效」面板的底部,開啟「選取器統計資料」分頁。頂端會顯示新列,列出所有選取器的總和資料。

所有選取器的總統計資料。

完成後,請在「效能」面板中開啟「設定」,然後取消勾選「啟用 CSS 選取器統計資料」核取方塊。

分析 CSS 選取器統計資料

如要依遞增或遞減順序排序「Selector Stats」表格中的資料,請按一下資料欄標題。舉例來說,如要查看哪些 CSS 選取器耗費最多時間,請按一下「Elapsed (ms)」欄標題。

資料已依時間長短遞減排序。

如要改善網頁效能,請著重於下列 CSS 選取器:

  • 計算時間過長 (經過時間 (毫秒) 值偏高)。
  • 瀏覽器嘗試比對多次 (嘗試比對次數值偏高)。
  • 瀏覽器實際上未與許多元素相符 (相符項目數值低於嘗試比對次數值)。
  • 慢速路徑不相符的百分比偏高。

例如,在前述螢幕截圖中:

  • 第一個 CSS 選取器 (html body .ps[tooltip...) 需要的時間最多。
  • 瀏覽器引擎嘗試比對這個 CSS 選取器 1104 次,但未比對到任何元素。

因此,這個 CSS 選取器是我們首先嘗試改善的候選項目。

請嘗試變更 CSS 選取器,讓系統在計算和比對網頁元素時,所需的時間更短。如何改善 CSS 選取器,取決於您的特定用途。

重複執行本教學課程中的步驟,確認您所做的變更是否有助於縮短「Elapsed (ms)」欄中的「Recalculate Style」事件持續時間。