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

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

Jeremy Wagner

Paul Lewis

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

樣式計算

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

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

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

互動很重要的一環是相框。用於顯示下一個影格的轉譯工作是由許多部分組成包括版面配置、繪製和這類模型本頁主要著重樣式計算費用，但會減少任何部分與互動相關的轉譯階段，也減少了包括用於樣式計算

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

.title {
  /* styles */
}

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

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

為了判斷這些樣式套用到網頁的方式，瀏覽器必須有效要求「是」含有 title 類別的元素，其父項為類別為 box 的 minus-nth-plus-1 子項元素？」這可能需要很長的時間，視使用的選擇器而定以及相關瀏覽器如要簡化這項作業您可以變更選取器只能使用類別名稱：

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

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

另一個考量成效，但比起選擇工具，更重要的是是指元素變更時需要處理的工作量。

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

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

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

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

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

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

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

編寫類似 BEM (區塊、元素、修飾符) 的方法並在選取器中烘焙比對效能優點。BEM 建議所有項目都有單一類別，而您需要階層時也會複製到類別名稱中：

.list {
  /* Styles */
}

.list__list-item {
  /* Styles */
}

如果需要修飾符 (例如在最後一個-子項範例中)，可以加入：

.list__list-item--last-child {
  /* Styles */
}

從架構結構開始，BEM 是很好的起點而且由於風格查詢可以簡化決策過程。

如果您不喜歡 BEM，可以透過其他方式運用 CSS 在開始之前，先評估它們的表現和人體工學。

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