「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」擷取設定,並記錄效能追蹤記錄。
如要記錄含有選取器統計資料的效能追蹤記錄,請按照下列步驟操作:
開啟網頁,例如相片庫示範頁面。
開啟開發人員工具,然後前往「Performance」面板。
在「成效」面板中,按一下「設定」「擷取設定」按鈕,然後勾選「啟用 CSS 選取器統計資料」。
按一下「已勾選」
「錄製」,執行要改善的情況,然後按一下「停止」 。
接著,請查看 CSS 選取器統計資料,如後續章節所述。
查看單一事件的 CSS 規則選取器統計資料
如要查看單一「重新計算樣式」事件中涉及的 CSS 規則選取器統計資料,請按照下列步驟操作:
在成效記錄中找出「Recalculate Style」事件,然後按一下該事件。
在「成效」面板的底部,開啟「選取器統計資料」分頁。
「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」表複製到試算表中,如下所示:
找出您想瞭解的第一個「Recalculate Style」事件,然後按一下該事件。
在「成效」面板的底部,開啟「選取器統計資料」分頁。
在選取器統計資料表上按一下滑鼠右鍵,然後選取「複製表格」。
將表格貼到 Google 試算表等試算表中。
針對感興趣的其他「Recalculate Style」事件重複執行上述步驟。
完成後,請在「效能」面板中開啟「設定」,然後取消勾選「啟用 CSS 選取器統計資料」核取方塊。
查看完整錄製內容的 CSS 規則選取器匯總統計資料
如要查看整個效能記錄中涉及的 CSS 規則選取器的匯總統計資料,請按照下列步驟操作:
按一下火焰圖表的空白區域,取消選取任何可能選取的事件。
選取整個錄音範圍。如要這麼做,請在「Performance」面板頂端,按兩下 CPU 圖表。
在「成效」面板的底部,開啟「選取器統計資料」分頁。頂端會顯示新列,列出所有選取器的總和資料。
完成後,請在「效能」面板中開啟「設定」,然後取消勾選「啟用 CSS 選取器統計資料」核取方塊。
分析 CSS 選取器統計資料
如要依遞增或遞減順序排序「Selector Stats」表格中的資料,請按一下資料欄標題。舉例來說,如要查看哪些 CSS 選取器耗費最多時間,請按一下「Elapsed (ms)」欄標題。
如要改善網頁效能,請著重於下列 CSS 選取器:
- 計算時間過長 (經過時間 (毫秒) 值偏高)。
- 瀏覽器嘗試比對多次 (嘗試比對次數值偏高)。
- 瀏覽器實際上未與許多元素相符 (相符項目數值低於嘗試比對次數值)。
- 慢速路徑不相符的百分比偏高。
例如,在前述螢幕截圖中:
- 第一個 CSS 選取器 (
html body .ps[tooltip...
) 需要的時間最多。 - 瀏覽器引擎嘗試比對這個 CSS 選取器 1104 次,但未比對到任何元素。
因此,這個 CSS 選取器是我們首先嘗試改善的候選項目。
請嘗試變更 CSS 選取器,讓系統在計算和比對網頁元素時,所需的時間更短。如何改善 CSS 選取器,取決於您的特定用途。
重複執行本教學課程中的步驟,確認您所做的變更是否有助於縮短「Elapsed (ms)」欄中的「Recalculate Style」事件持續時間。