「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 選取器,需視你的特定用途而定。
重複本教學課程中的步驟,確認所做變更減少了「經過時間 (毫秒)」欄中的「重新計算樣式」事件持續時間。