「效能」面板會在右上角標示每項長時間執行的工作,在「摘要」分頁中會顯示警告,指出主執行緒上花費較長時間,且效能緩慢:
在您的效能錄音中,部分長時間執行的工作可能是「重新計算樣式」事件。「重新計算樣式」事件可追蹤瀏覽器執行以下操作所需的時間:
- 透過疊代網頁上的 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)」欄中的「重新計算樣式」事件持續時間。