「Performance」面板會為每項長時間執行的工作標上紅色三角形，並在「Summary」分頁中標示警告訊息，指出主執行緒中耗時較長且效能緩慢的作業：
在表演記錄中，某些長時間執行的工作可能是「重新計算樣式」事件。「Recalculate Style」(重新計算樣式) 事件會追蹤瀏覽器執行以下動作所需的時間：
- 反覆執行網頁上的 DOM 元素，找出符合指定元素的所有 CSS 樣式規則。
- 根據相符的 CSS 樣式規則，計算每個元素的實際樣式。
如果 CSS 規則的適用性有所異動，就必須重新計算 CSS 樣式，例如：
- 元素會新增至 DOM 或從 DOM 中移除。
- 元素的屬性有所變更，例如類別或 ID 屬性的值。
- 使用者做出輸入內容，例如移動滑鼠或變更元素焦點，這可能會影響
:hover規則。
長時間執行的 Reculate Style 事件可能會造成效能問題，也可能導致畫面長時間延遲，影響您網站的與下一個顯示內容互動 (INP) 的延遲情形。如果發現長時間執行的「重新計算樣式」事件，可以透過「選取器統計資料」分頁，瞭解哪些 CSS 選取器花費最多時間，拖慢效能。
「選取器統計資料」分頁提供與效能記錄中一或多個「重新計算樣式」事件相關的 CSS 規則選取器統計資料。
在開啟選取器統計資料的情況下錄製效能追蹤記錄
如要在長時間執行的「重新計算樣式」事件期間查看 CSS 規則選取器的統計資料，請記錄在開啟「選取器統計資料」擷取設定時的成效追蹤記錄。
如何記錄選取器統計資料的效能追蹤記錄：
開啟網頁，例如相片庫示範頁面。
開啟開發人員工具並前往「Performance」面板。
在「成效」面板中，按一下「設定」「擷取設定」按鈕，然後勾選 check_box [啟用 CSS 選取器統計資料]。
按一下 radio_button_checked「錄製」，執行要改善的情境，然後點選「stop_circle」radio_button_checked。
然後查看 CSS 選取器統計資料，方法請見下一節。
查看單一事件的 CSS 規則選取器統計資料
如何查看與單一「Recalculate Style」(重新計算樣式) 事件相關的 CSS 規則選取器統計資料：
在表演記錄中找到並點選「重新計算樣式」事件。
在「成效」面板底部的部分，開啟「選取器統計資料」分頁。
「選取器統計資料」分頁中的 CSS 選取器表格
「選取器統計資料」分頁內含 CSS 選取器表格。下表列出各個 CSS 選取器的下列資訊：
| 欄 | 說明 |
|---|---|
| 經過時間 (毫秒) | 瀏覽器比對此 CSS 選取器的時間。時間以毫秒 (ms) 為單位，其中 1 毫秒代表每秒 1/1000 秒鐘。 |
| 嘗試比對次數 | 瀏覽器引擎嘗試與此 CSS 選取器比對的元素數量。 |
| 相符項目數 | 瀏覽器引擎與此 CSS 選取器相符的元素數量。 |
| 緩慢路徑不相符百分比 | 不符合這個 CSS 選取器的元素比例、瀏覽器引擎嘗試比對的元素，以及要求瀏覽器引擎使用較少最佳化的程式碼。 |
| 選取器 | 相符的 CSS 選取器。 |
| CSS 樣式表 | 包含 CSS 選取器的 CSS 樣式表。 |
完成後，請在「效能」面板中開啟「設定」「擷取設定」，並清除「啟用 CSS 選取器統計資料」。
查看多個事件的 CSS 規則選取器統計資料
如要查看涉及多個「重新計算樣式」事件的 CSS 規則選取器匯總統計資料，請在試算表中複製多個 Selector Stats 表格，如下所示：
找出並點選第一個「Recalculate Style」(重新計算樣式) 事件。
在「成效」面板底部的部分，開啟「選取器統計資料」分頁。
在選取器統計資料表上按一下滑鼠右鍵，然後選取「複製資料表」。
將表格貼到試算表 (例如 Google 試算表)。
針對您想瞭解的其他「重新計算樣式」事件重複上述步驟。
完成後，請在「效能」面板中開啟「設定」「擷取設定」，並清除「啟用 CSS 選取器統計資料」。
查看完整記錄的匯總 CSS 規則選取器統計資料
如何查看與整個成效記錄相關的 CSS 規則選取器匯總統計資料：
按一下火焰圖的空白區域，取消選取任何已選取的事件。
選取整個記錄範圍。如要這麼做，請按兩下「Performance」面板頂端的 CPU 圖表。
在「成效」面板底部的部分，開啟「選取器統計資料」分頁。畫面頂端會顯示新的一列，顯示所有選取器的總計資料。
完成後，請在「效能」面板中開啟「設定」「擷取設定」，並清除「啟用 CSS 選取器統計資料」。
分析 CSS 選取器統計資料
如要以遞增或遞減順序排序「選取器統計資料」表格中的資料，請按一下資料欄標題。舉例來說，如要查看哪些 CSS 選取器花費最多的時間，請按一下「Elapsed (ms)」(經過時間 (ms)) 欄標題。
若要嘗試改善網頁效能，請著重在符合以下條件的 CSS 選取器：
- 計算較長的時間 (高經過時間 (ms) 值)。
- 瀏覽器嘗試比對多次 (配對嘗試值偏高)。
- 瀏覽器實際比對的元素數量不多 (「Match Count」(比對次數) 低、「Match Trys」(比對嘗試次數) 值低)。
- 緩慢路徑不相符的比例很高。
例如，在上一張螢幕截圖中：
- 第一個 CSS 選取器 (
html body .ps[tooltip...) 是最快的必備條件。 - 瀏覽器引擎嘗試比對此 CSS 選取器 1104 次，但與任何元素都不相符。
因此，這個 CSS 選取器是第一個嘗試改善的候選項目。
請嘗試變更 CSS 選取器，縮短計算和比對網頁上的元素所需的時間。如何改善 CSS 選取器，需視你的特定用途而定。
重複本教學課程中的步驟，確認所做變更減少了「經過時間 (毫秒)」欄中的「重新計算樣式」事件持續時間。