要素数10万のHTMLページを使ってCSSセレクターの照合にかかる時間を測定した #CSS

querySelectorAll()を使ってCSSセレクターのパフォーマンスを測定した結果を紹介した記事があったので、自分でもやってみました。

実行環境

Chrome 96
macOS Big Sur 11.6.2
iMac 2017 / CPU 3.5GHz quad-core Intel Core i5 / メモリ32GB

参考にしたのはこの記事とコードです。

[資料1] Optimizing CSS: ID Selectors and Other Myths
[資料2] CodePen: CSS selector performance

CSSセレクターのパフォーマンスの観点で私が以前から気になっていたのが、たとえば以下のようなマークアップでa要素にスタイルをあてる場合です。

html

<ul>
  <li>The quick <a href="#">brown fox</a> jumps over the lazy dog</li>
</ul>

要素の親子関係を使って「このa要素」を表すCSSセレクターを書く場合、ul, li, a要素にclassを割り当ててあるか・いないかによって選択肢がいくつもあります。たとえばul要素だけclassを割り当てて、.list li aや.list aと書くなど。一方、ブラウザがセレクターを解釈する処理は右から左へ行われるらしいので、このようなセレクターの形式は要素の照合に時間がかかってパフォーマンスが低下してしまうのでは？と気になったりもします。そこで、セレクターの書き方によって要素の照合にかかる時間がどれだけ増えるのか、要素数10万のHTMLページを作って実際に測って確かめてみることにしました。

結論から言うと、li要素の子のa要素については、10万要素¹のHTMLページであってもセレクターの書き方の違いによるパフォーマンスの差は数ミリ秒程度のものでした。

測定方法

テスト用のHTMLページ

テスト用のページは以下の構造を持つdiv.boxを10,000個配置したもので、HTML要素数は全体で約100,000個になります。ここで${count}は各div.boxに対して割り当てた連番(1〜10,000)が入ります。

html

<div class="box b${count}">
  <div class="title"><p>${count}</p></div>
  <ul class="list">
    <li class="item first"><a href="#" class="link">_</a></li>
    <li class="item active"><a href="#" class="link">_</a></li>
    <li class="item last"><a href="#" class="link">_</a></li>
  </ul>
</div>

実際のページはこれです。資料2のコードからforkして今回の測定用に改造しました。

Part 1: https://codepen.io/kaz_hashimoto/pen/rNGGKJj

Part 2: https://codepen.io/kaz_hashimoto/pen/rNGYrvJ

画面のMeasureボタンをクリックすると測定を開始し、DevToolsのコンソール画面に結果を表形式で出力します。測定は、querySelectorAll()の呼び出し前後のタイムスタンプの差の平均値（単位ミリ秒）です。試行回数はPart 1が20回、Part 2が30回です。

javascript

function test(selector) {
  const t0 = performance.now();
  document.querySelectorAll(selector);
  const t1 = performance.now();
  const msec = t1 - t0;
  return msec;
}

テスト項目と測定結果

今回テストした項目と測定結果の要約は下表のとおりです。「li要素の子のa要素」に対するセレクター（項目No.1）に加えて、パフォーマンスの観点から気になっていた項目（No.2〜8）も追加しました。

テストページPart 1

#	概要	結果
1	ul>li>a要素を選択する	3.1〜5.1ms
2	擬似クラスを付けてul>li>a要素を選択する	4.4〜4.8ms
3	兄弟結合子を使ってdivを選択する	2.5〜2.6ms ただし、特定のパターンで596ms

テストページPart 2

#	概要	結果
4	多数のclassを持つ要素に対してclass名で選択する	5.6〜6.8ms
5	長いclass名を持つ要素に対してclass名で選択する	3.1〜4.6ms
6	孤立したclass名をセレクターの前に付けて選択する	1.6〜4ms
7	孤立したclass名をセレクターの前に付けて選択する(#6 + #4)	6.6〜9.4ms
8	孤立したclass名をセレクターの前に付けて選択する(#6 + #5)	3.7〜6.2ms

※「孤立したclass名」とはHTMLページのどの要素からも参照されないclass名のことです。

結果の詳細

Test#1: ul>li>a要素を選択する

セレクターの組み合わせパターン

Test#1で対象とする「li要素の子のa要素」を表すセレクターのパターンについては、以下の５つの項目の組み合わせで構成されるセレクターとしました。他にもIDセレクターや全称セレクターが含まれるケースも考えられますが、キリがないので除外しました。

要素を直接指定: ul, li, a
class名を指定: .list, .item, .link
要素とclass名を指定: ul.list, li.item, a.link
子孫結合子（スペース)を指定： ul li a, .item aなど
子結合子「>」を指定： ul > li > a, .item > aなど

querySelector()の戻り値がundefinedになるものを除外すると、有効なセレクターは全部で138個になりました（組み合わせを生成するソースコードが正しければ…）。

測定結果

138個のセレクターについての測定結果のconsole出力を下図に示します。行の順序はtime値(ミリ秒)の昇順です。specificityはセレクターの詳細度です。

まずは速い方から。

速いセレクター上位20

a要素にclassを付けない場合は、祖先のul要素とのペアよりも親要素liと組み合わせたパターンにする方がパフォーマンスが若干良いようです。

遅いセレクター下位20

パターンが複雑になり詳細度の下２桁が大きいセレクターでは、プラス1〜2ms処理時間が増えてきました。ul.listのように「要素名.class名」と言う形式は詳細度が増えて扱いづらいだけでなく、パフォーマンス的にも不利なのがよくわかりました。

Test#2: 擬似クラスを付けてul>li>a要素を選択する

次に、li要素の兄弟要素のグループ内での位置を指定してa要素を選択するケースです。liに擬似クラス:nth-child(), :first-child, および:last-childのいずれかを付けた場合と、位置を表すclass名で代用した場合とを比較しました。

html

 <ul class="list">
  <li class="item first"><a href="#" class="link"></a></li>
  <li class="item active"><a href="#" class="link"></a></li>
  <li class="item last"><a href="#" class="link"></a></li>
</ul>

class名で代用したセレクターと比較して、擬似クラスを用いたセレクターは相対的にやや速度が落ちるようです。

Test#3: 兄弟結合子を使ってdivを選択する

次は、10,000個のdiv.boxに対して、隣接兄弟結合子（+）および一般兄弟結合子（~）を使ったセレクターで要素を選択した場合です。div.box要素には連番でそれぞれ一意のclass名b1, b2, ...を振ってあります（下図）。

先行要素に".b5000"を持つ後続要素".box"を選択するセレクター".b5000 ~ .box"だけが非常に遅く、約596msもかかっています。

Test#4: 多数のclassを持つ要素に対してclass名で選択する

次は、各要素にclassを30個付けた状態でそのうちの１つのclassをセレクターに指定した場合です。

Before: 30個のclassを付ける前の状態でテスト
まずは比較のため、classが1〜2個しか付いていない初期状態で実行した時の結果です。

After: classを30個付けた状態でテスト
こちらは要素にclassを30個付けて、セレクターには15番目のclass名を指定して要素を選択した時の結果です。

要素のみのシンプルなセレクター(div, ul, li, a)はBefore/After共に2ms程度で増加も0.7ms以下なのに対して、class名を指定した方は3〜4ms遅くなっています。