探究 CSS 選擇器的性能真相

作者：CUGGZ 2023-01-30 08:42:33

改進某些 CSS 選擇器可以帶來重要的性能提升。然而，關鍵是要記住，這主要取決于特定用例。可以使用性能工具來測試網頁的性能，如果發現樣式重新計算使渲染變慢，就使用 Edge 瀏覽器中新的“選擇器統計信息”功能！

大家好，我是 CUGGZ。

在 CSS 中，有些選擇器會比其他選擇器執行速度更快。下面就來深入研究 CSS 選擇器的性能真相，看看如何編寫 CSS 選擇器才能更快地執行！

幕后

編寫 CSS 選擇器的方式會影響瀏覽器如何渲染頁面。每當頁面發生變化時，運行它的瀏覽器引擎需要查看新的 DOM 樹，并確定如何根據可用的 CSS 樣式表對其進行樣式設置。這種將樣式與 DOM 節點匹配的操作稱為重新計算樣式。瀏覽器引擎需要查看所有規則并決定哪些規則適用于給定元素。為此，引擎需要從右向左查看選擇器規則。

例如，當引擎看到像.wrapper .section .title .link這樣的選擇器時，它會首先嘗試將link類與元素匹配，如果匹配，則從右到左沿鏈向上找到類名為title的祖先元素，然后找到類名為section的元素，最后找到類名為wrapper的元素。

這個例子說明，瀏覽器引擎只匹配 .link 可能比匹配更長的 .wrapper .section .title .link 選擇器更快，因為需要檢查的更少了。

當然，類并不是在 CSS 選擇器中可以使用的唯一類型標識符。一個有趣的例子就是使用屬性選擇器并進行子字符串匹配，如 [class*="icon-"]，這選擇器就要求瀏覽器引擎不僅要檢查元素是否有 class 屬性，還要檢查這個屬性的值是否包含子字符串 icon-。這個例子說明，不同的選擇器編寫方式可能需要引擎或多或少的工作來應用 CSS 規則。

在實踐中，這重要嗎？

這在很大程度上取決于網頁、DOM 樹的大小、CSS 規則的數量以及 DOM 是否經常變化。不幸的是，并沒有關于這方面的規則。

事實上，談到規則，我們喜歡為什么是好的和什么是壞的制定規則。規則幫助我們快速做出決定，并在編寫代碼和設計軟件時提供指導。但這也會讓我們無法了解具體情況下真正發生的事。

在編寫 CSS 選擇器時，嚴格應用規則或使用 linter 自動執行，在某些情況下可能會適得其反。過于復雜的 CSS 選擇器，再加上變化很大的巨大 DOM 樹，很可能會導致性能不佳。過度的套用理論規則來獲得更好的性能，可能會使 CSS 更難閱讀和維護，并且實際收益并不大。

因此，盡可能以對應用有意義且易于閱讀和維護的方式來編寫代碼，然后再去衡量重要用戶場景的實際性能。

性能測量工具

Edge 瀏覽器中的 DevTools 提供了一個性能工具，它可以幫助我們測量頁面性能。在實際的測試中，我們要為用戶建立同理心，并盡可能使用他們實際使用的設備。因為往往開發機器可能比用戶的設備強大得多。DevTools 可以直接從工具內部降低 CPU 和網絡連接速度。

從 Edge 109 版本開始，DevTools 中的性能工具可以列出樣式重新計算中成本最高的選擇器。使用方法如下：

打開 DevTools 中的性能工具；
點擊右上角的齒輪圖標打開工具設置。
選中Enable advanced rendering instrumentation (slow)

點擊錄制按鈕，在要改進的網頁上執行特定場景，然后單擊停止；
在記錄的配置文件中，確定要改進的重新計算樣式，并在瀑布視圖（“主要”部分）中選擇它；
在底部的選項卡欄中，點擊“選擇器統計信息”進行查看。

DevTools 現在提供了瀏覽器引擎在此重新計算操作期間計算的所有 CSS 選擇器的列表，可以按選擇器處理時間或匹配次數對選擇器進行排序。

如果發現一個選擇器需要很長時間來處理，并且匹配了很多次，那么它可能就是一個可以優化的對象。選擇器是否可以簡化？是否可以更具體地描述需要匹配的元素？

案例分析

下面通過一個照片庫案例，看看如何改進 CSS 選擇器的性能！

這個頁面頂部有一個工具欄，可以按相機型號、光圈、曝光時間等過濾照片。現在在相機型號之間切換感覺有點慢。所以，主要關注如下場景：

加載頁面，并等待過濾器準備就緒；
將相機型號切換到另一個值并開始記錄性能；
切換回所有相機型號并停止錄制。

當切換回所有相機型號時速度很慢，因此只需要測量這一過程。我們還將 CPU 速度降低四倍，以獲得比通常在功能強大的開發機器上獲得的結果更真實的結果。

錄制準備就緒后，可以在配置文件中看到一個長的重新樣式計算塊，總計執行超過 900 毫秒。點擊這個塊，打開選擇器統計信息，然后按運行時間排序：

一個選擇器需要匹配的工作越多，匹配的次數越多，通過改進這個選擇器獲得的性能提升就越多。在列表中，主要關注以下選擇器：

.gallery .photo .meta ::selection
.gallery .photo .meta li strong:empty
[class*=" gallery-icon--"]::before
.gallery .photo .meta li
*
html[dir="rtl"] .gallery .photo .meta li button

改進 ::selection 選擇器

.gallery.photo.meta ::selection 選擇器用來匹配照片元數據被用戶選中時的背景和文本顏色。當用戶選擇照片下方的文本時，將使用自定義顏色而不是瀏覽器默認顏色。

由于代碼中的錯誤，這種特殊情況實際上是有問題的。真正的代碼應該是 .gallery.photo.meta::selection，即::selection前面沒有空格。因為這個錯誤的空格，選擇器實際上被引擎解析為 .gallery .photo .meta *::selection，這使得在樣式重新計算期間匹配起來要慢得多，因為引擎需要檢查所有 DOM 元素，然后驗證它們是否嵌套在正確的祖先中。

如果沒有多余的空格，引擎只需要檢查元素是否具有.meta類，然后再繼續即可。

改進 :empty 選擇器

.gallery .photo .meta li strong:empty中的 :empty 選擇器表示僅在 strong 元素沒有任何內容時匹配。這就可能需要引擎做更多的工作，而不僅僅是檢查元素的標簽名稱。

查看與此類似的其他 CSS 規則，可以看到：

.gallery .photo .meta li strong:empty {
  padding: .125rem 2rem;
  margin-left: .125rem;
  background: var(--dim-bg-color);
}

html[dir="rtl"] .gallery .photo .meta li strong:empty {
  margin-left: unset;
  margin-right: .125rem;
}

相同的選擇器重復兩次，但第二個選擇器以 html[dir=rtl] 為前綴，當頁面上的文本方向是從右到左時，rtl 方向規則會覆蓋左邊距并將其替換為右邊距。

為了改進這一點，可以使用 CSS 邏輯屬性。可以使用符合任何文本方向的邏輯邊距方向，而不是指定物理邊距方向：

.gallery .photo .meta li strong:empty {
  padding: .125rem 2rem;
  margin-inline-start: .125rem;
  background: var(--dim-bg-color);
}

這樣，第二個選擇器 html[dir="rtl"] .gallery .photo .meta li button 就可以去掉了。

改進 [class*="gallery-icon--"] 選擇器

以下是使用此選擇器的 CSS 規則：

[class*=" gallery-icon--"]::before {
  content: '';
  display: block;
  width: 1rem;
  height: 1rem;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  filter: contrast(0);
}

.gallery-icon--camera::before { background-image: url(...); }
.gallery-icon--aperture::before { background-image: url(...); }
.gallery-icon--exposure::before { background-image: url(...); }

這里可以通過圖標類給元素添加對應的圖標。這就要求引擎讀取類名并對其進行子字符串搜索。可以通過以下方式幫助引擎減少工作量：

.gallery-icon::before {
  content: '';
  display: block;
  width: 1rem;
  height: 1rem;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  filter: contrast(0);
}

.gallery-icon.camera::before { background-image: url(...); }
.gallery-icon.aperture::before { background-image: url(...); }
.gallery-icon.exposure::before { background-image: url(...); }

現在，不只使用一個類，而是向元素添加兩個類：<div class="gallery-icon camera">，而不是 <div class="gallery-icon--camera">，這樣就無需再讀取類名以及搜索子字符串，減少了瀏覽器引擎的工作量。

改進 .gallery .photo .meta li 選擇器

這個選擇器會強制瀏覽器去檢查 li 元素的祖先列表中的多個層級。案例的網頁中有很多 li 元素，這可能意味著很多工作。

可以通過為 li 元素指定一個特定的類并刪除不必要的嵌套來簡化它：

.photo-meta {
  display: flex;
  align-items: center;
  gap: .5rem;
  height: 1.5rem;
}

改進 * 選擇器

*符號在 CSS 中用作匹配任何元素的通用選擇器。這種匹配任何內容的能力意味著引擎需要將相關規則應用于所有元素。在性能記錄中可以看到，這個選擇器被匹配了很多次。

在案例中，它應用了一個特定的 box-sizing 值：

* {
  box-sizing: border-box;
}

這在 CSS 中很常見，但最好刪除它，僅在需要時設置 box-sizing 屬性。

改進結果

完成以上改進之后，再來查看這個場景的性能情況：

在第一次性能記錄中，同樣的“重新計算樣式”塊運行時間幾乎為一秒，現在運行時間約為 300 毫秒，性能獲得了很大的提升！

總結

案例研究表明，改進某些 CSS 選擇器可以帶來重要的性能提升。然而，關鍵是要記住，這主要取決于特定用例。可以使用性能工具來測試網頁的性能，如果發現樣式重新計算使渲染變慢，就使用 Edge 瀏覽器中新的“選擇器統計信息”功能！

參考：https://blogs.windows.com/msedgedev/2023/01/17/the-truth-about-css-selector-performance/

責任編輯：武曉燕來源：前端充電寶

CSS 選擇器性能