本頁面由 Cloud Translation API 翻譯而成。

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

Jeremy Wagner

Paul Lewis

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

樣式計算

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

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

與下一個顯示的內容互動 (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。這可能比運算成本高出許多根據選取器的類別名稱，將選取器與元素進行比對。

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

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

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

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

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

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

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

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

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

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

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

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

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

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