大家好，我是 CUGGZ。

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

幕后

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

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

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

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

在實踐中，這重要嗎？

這在很大程度上取決于網(wǎng)頁、DOM 樹的大小、CSS 規(guī)則的數(shù)量以及 DOM 是否經(jīng)常變化。不幸的是，并沒有關(guān)于這方面的規(guī)則。

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

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

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

性能測量工具

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

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

1. 打開 DevTools 中的性能工具；
2. 點擊右上角的齒輪圖標(biāo)打開工具設(shè)置。
3. 選中Enable advanced rendering instrumentation (slow)

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

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

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

案例分析

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

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

1. 加載頁面，并等待過濾器準(zhǔn)備就緒；
2. 將相機(jī)型號切換到另一個值并開始記錄性能；
3. 切換回所有相機(jī)型號并停止錄制。

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

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

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

• .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

改進(jìn) ::selection 選擇器

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

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

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

改進(jìn) :empty 選擇器

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

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

.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;
}

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

為了改進(jìn)這一點，可以使用 CSS 邏輯屬性?？梢允褂梅先魏挝谋痉较虻倪壿嬤吘喾较颍皇侵付ㄎ锢磉吘喾较颍?/p>

.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 就可以去掉了。

改進(jìn) [class*="gallery-icon--"] 選擇器

以下是使用此選擇器的 CSS 規(guī)則：

[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(...); }

這里可以通過圖標(biāo)類給元素添加對應(yīng)的圖標(biāo)。這就要求引擎讀取類名并對其進(jìn)行子字符串搜索?？梢酝ㄟ^以下方式幫助引擎減少工作量：

.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(...); }

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

改進(jìn) .gallery .photo .meta li 選擇器

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

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

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

改進(jìn) * 選擇器

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

在案例中，它應(yīng)用了一個特定的 box-sizing 值：

* {
  box-sizing: border-box;
}

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

改進(jìn)結(jié)果

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

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

總結(jié)

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

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