降低樣式計算的範圍和複雜度

Jeremy Wagner

Paul Lewis

JavaScript 經常是視覺變更的觸發條件。有時會 但有時是透過樣式操作直接推動變更 導致視覺上出現變化 像是搜尋或排序資料成效不佳或 長時間執行的 JavaScript 是造成效能問題的常見原因 ，儘可能減少該技術所造成的影響。

樣式計算

透過新增及移除元素、變更屬性、類別、 或播放動畫會使瀏覽器重新計算元素樣式 在許多情況下，系統往往會調整部分或整個網頁的版面配置。這項程序稱為 樣式計算。

瀏覽器會建立一組比對選取器，開始計算樣式 決定適用於任何指定元素的類別、虛擬選取器和 ID。 接著，它會處理相符選取器中的樣式規則 元素的最終樣式

注意： 在 Blink (用於轉譯引擎的算繪引擎) 的使用時間中，大約有一半的時間 Chromium 和衍生瀏覽器) 計算元素的運算樣式是 另一半用於比對選取器 比對規則的樣式表示法— Rune Lillesveen，Opera / 閃爍的樣式無效通知

樣式重新計算在互動延遲中的角色

與下一個顯示的內容互動 (INP) 是以使用者為中心的執行階段 這項指標會評估網頁回應使用者輸入內容的整體回應度。 評估從使用者與網頁互動到這段期間的互動延遲時間 瀏覽器會在下一個頁框上繪製 存取 API

互動很重要的一環是 相框。用於顯示下一個影格的轉譯工作是由許多部分組成 包括版面配置、繪製和 這類模型本指南著重於樣式計算費用，但將以較低者為主 任何部分的顯示時間長度也會減少 適合延遲時間僅毫秒的 即時高處理量應用程式

降低選取器的複雜度

簡化 CSS 選取器有助於加快網頁的樣式計算。 最簡單的選取器只會參照一個類別名稱，以參照 CSS 中的元素：

.title {
  /* styles */
}

但隨著任何專案規模擴增 可能需要更複雜的 CSS 再加入類似下方的選取器：

.box:nth-last-child(-n+1) .title {
  /* styles */
}

為了判斷這些樣式套用到網頁的方式，瀏覽器必須有效 詢問「這是具備 title 類別的元素，其父項為 box 是其父項元素的減號 + 1 子項嗎？正在尋找路線 瀏覽器需要一些時間。如要簡化這項作業，您可以將 選取器，使用更明確的類別名稱：

.final-box-title {
  /* styles */
}

這些替換類別名稱看起來可能不盡預期，但卻使 大幅簡化執行工作在前一個版本中，舉例來說 元素是其型別的最後一個項目，它必須先瞭解所有 判斷之後是否有其他任何元素 是 nth-last-child。這可能比運算成本高出許多 根據選取器的類別名稱，將選取器與元素進行比對。

減少設定樣式的元素數量

另一個提高成效考量因素，通常比選擇工具更重要 複雜度：是元素變更時需要處理的工作量。

一般而言，計算運算元素樣式時最壞的費用 是元素數量乘以選取器數量，因為瀏覽器 請根據每種樣式至少檢查一次元素 比對。

注意： 以往如果您變更了一個元素的類別， 子項所需的計算樣式需要重新計算。現在，有些瀏覽器 而是要為每個產生成果的元素，保留一組專屬規則 元素樣式有所變更時，必須重新計算。也就是說 元素可能需要根據樹狀結構中的位置重新計算，且 異動內容

樣式計算能夠直接指定幾個元素，而非失效 整個網頁中這種問題通常在新式瀏覽器中較不容易 瀏覽器不一定需要檢查變更可能影響的所有元素。 不過，舊版瀏覽器不一定能滿足這類工作的需求。地點 您可以減少失效的元素數量。

注意： 網頁元件中的樣式計算方式略有不同， 樣式不會跨越 Shadow DOM。 而且範圍預設為個別元件，而非 整體的樹狀結構不過整體而言，同樣的概念仍然適用：較小的樹木 規則越簡單，處理速度就越快 複雜的規則

評估樣式重新計算費用

您可以用兩種方式衡量樣式重新計算成本： 。每個變數都會根據您是否要在瀏覽器中測量代碼而不同 評估整個程序的運作時間 將真正的使用者帶往你的網站

在 Chrome 開發人員工具中測量樣式重新計算費用

計算重新計算樣式費用的方法之一 是利用 面板。請按照下列步驟操作：

1. 開啟開發人員工具。
2. 前往「成效」分頁。
3. 勾選「選取器統計資料」核取方塊 (選用)。
4. 按一下「錄製」。
5. 與頁面互動。

停止錄製後，您會看到如下圖所示：

顯示樣式計算的開發人員工具報表。

頂端的長條是小型火焰圖，用來繪製影格數 第二。活動越靠近橫條底部，速度越快 瀏覽器繪製的畫面。如果火焰圖向外延伸 上方紅色長條 表示這個做法造成問題 需要長時間執行轉譯的影格

開發人員工具活動中長時間執行的影格 摘要。

在互動 (例如捲動) 時，長時間執行的影格價值會更接近 快看，如果您看到的是紫色大塊區域，請放大活動並選取 標示為「Recalculate Style」(重新計算樣式) 的工作，以取得更多潛在 相當昂貴的風格重新計算工作

重新計算長久以來的風格， 而且在開發人員工具摘要中顯示的時間超過 25 毫秒

只要按一下事件，即可顯示其呼叫堆疊。如果轉譯工作是由 使用者互動後，就會呼叫觸發樣式變更的 JavaScript。 同時也會顯示受到變更影響的元素數量 (只有超過 900 個) 元素，以及樣式計算花費的時間。您可以使用 相關資訊，開始嘗試在您的程式碼中找出修正方法。

如果已勾選「選取器統計資料」核取方塊 (先前往「成效面板」設定頁面，然後再選取底部) 追蹤記錄中的面板會有另一個同名的分頁。

顯示在 Chrome 效能面板中的選取器統計資料表格 開發人員工具。

這個面板提供各選擇器相對成本的實用資料， 找出昂貴的 CSS 選取器

注意：「選取器統計資料」預設為關閉 這會增加表演錄影的負擔保持開啟 如果需要檢查 重新計算樣式事件和其他轉譯資訊。

詳情請參閱 CSS 選取器統計資料說明文件。

評估實際使用者的樣式重新計算費用

如果想知道重新計算樣式需要多少時間 長動畫頁框 API 會提供一切必要工具。這個 API 的資料已新增至 web-vitals JavaScript 程式庫， 包括樣式重新計算時間

如果您懷疑互動的呈現延遲是主要的 建議您就網頁 INP 的顯示次數做好萬全準備 。如需更多資訊，請參閱 如何測量實地樣式重新計算時間。

資源

• Chrome 開發人員工具中的選取器統計資料
• 閃爍的樣式撤銷
• 與下一個顯示的內容互動 (INP)
• web-vitals JavaScript 程式庫
• 測量實地樣式的重新計算時間

主頁橫幅由 Markus Spiske 提供，由 Unsplash 提供。