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