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

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。這可能比運算成本高出許多 這是因為選取器與元素相符的類別。

減少設定樣式的元素數量

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

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

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

評估樣式重新計算費用

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

  1. 開啟開發人員工具。
  2. 前往「成效」分頁。
  3. 按一下「錄製」
  4. 與頁面互動。

停止錄製後,您會看到如下圖所示:

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

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

正在放大
    在填入資料的活動摘要中,有 Chrome 開發人員工具的問題區
    Chrome 開發人員工具中的效能面板
開發人員工具活動中長時間執行的影格 摘要。

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

取得
    並詳細說明長時間執行的樣式,包括重要資訊
    表示樣式重新計算工作影響的元素數量。
重新計算長久以來的風格, 而且在開發人員工具摘要中顯示的時間超過 25 毫秒

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

使用方塊、元素和修飾符

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

.list {
  /* Styles */
}

.list__list-item {
  /* Styles */
}

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

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

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

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

資源

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