JavaScriptで「ある性質を有する要素の存在を確認する方法」で、最速なのはどれで、なぜか？

Question

前提

ul > liに対し、「ある性質を有する要素の存在を確認する方法」で最速のものを調べています。
存在するとき、しないときの処理の分岐を速くしたいためです。

実現したいこと

最速な方法と、理由を知りたいです。

発生している問題

自分なりに試した結果が以下のようにあり、どうやら「クラスを有する」の方が「データ属性を有する」よりも早いようなのですが、なぜそうなるのか？具体的な理由がわかりません。

該当のソースコード

テストデータは次のようにして、ul > liをセットした後に、randの位置に１件だけ対象の要素を入れておきます。
この対象の要素を探す方法で最速なものを調べているということです。

// テストデータをセット
(()=>{
	$('body').append('<ul></ul>'); 

	// n件のデータをセット
	const n = 10000;
	let lis = '';
	for (  let i = 0;  i < n;  i++  ) {
		lis += '<li></li>';
	}
	$('ul').html(lis);

	// 目的のデータを１つだけ指定
	const rand = Math.floor(Math.random()*n+1)
	$('ul > li').eq(rand)
		.attr('data-state','ok') // データ属性で対象を指定
		.addClass('is_ok');      // クラスで対象を指定  

})();

試したこと

以下４つの方法で試しました。「全件へのlength」「:firstへのlength」「クラスを有する」「データ属性を有する」というマトリクスです。

// 目的のデータの存在確認にどれが早いか
logFuncTime( logTimeByAllDatas );      // 「全件へのlength」「データ属性を有する」
logFuncTime( logTimeByAllClasses );    // 「全件へのlength」「クラスを有する」
logFuncTime( logTimeByFirstDatas );    // 「:firstへのlength」「データ属性を有する」
logFuncTime( logTimeByAFirstClasses ); // 「:firstへのlength」「クラスを有する」

// 「全件へのlength」「データ属性を有する」
function logTimeByAllDatas(){
	if( $('ul > li[data-state="ok"]').length ){
		// okが存在するときの処理をごにょごにょ
	}else{
		// okが存在しないときの処理をごにょごにょ
	}
}

// 「全件へのlength」「クラスを有する」
function logTimeByAllClasses(){
	if( $('ul > li.is_ok').length ){
		// okが存在するときの処理をごにょごにょ
	}else{
		// okが存在しないときの処理をごにょごにょ
	}
}

// 「:firstへのlength」「データ属性を有する」
function logTimeByFirstDatas(){
	if( $('ul > li[data-state="ok"]:first').length ){
		// okが存在するときの処理をごにょごにょ
	}else{
		// okが存在しないときの処理をごにょごにょ
	}
}

// 「:firstへのlength」「クラスを有する」
function logTimeByAFirstClasses(){
	if( $('ul > li.is_ok:first').length ){
		// okが存在するときの処理をごにょごにょ
	}else{
		// okが存在しないときの処理をごにょごにょ
	}
}

// 指定の関数が何秒かかったか確認
function logFuncTime( func ){
	// 実行開始日時を取得
	const startTime = performance.now();

	// 指定の関数をn回実行
	const n = 1000;
	for (  let i = 0;  i < n;  i++  ) {  
		func();
	}

	// 何秒かかったか確認
	const endTime = performance.now();
	const time = endTime - startTime;
	const second = time/1000;

	// 0.1秒を超えたら赤く、越えなければ青くしてログに出力
	const logStyle = second > 0.1 ? 'background-color:#ff9999;' : 'background-color:#c9d0ff;';
	const logData = n + ' 回 ' + func.name + ' を実行\n' + second + ' 秒';
	console.log('%c' + logData, logStyle);
}

実行すると「データ属性を有する」の２つが遅くなりがちかと思います。
https://jsfiddle.net/bhrg21ou/

私は１件だけ走査すれば済む「:firstへのlength」のlogTimeByFirstDatasとlogTimeByAFirstClassesが早くなるだろうと予想していたのですが、どうして「クラスを有する」のlogTimeByAllClassesとlogTimeByAFirstClassesが早くなるのでしょうか？

逆に「データ属性を有する」の２つがなぜ遅いのか理由も知りたいです。
よろしくお願い致します。

Comments

[nikuatsu]

m.ts10806さん、ご指摘痛みいりますが、文章がないとわからないので、もしよろしければ何がいけなかったのか教えてくださいませ…

Answer 1

:first が速くない理由

:first は jQuery 独自の擬似クラスで、これがセレクタに入っているとブラウザ内蔵のネイティブコードによる querySelectorAll() が使われずに jQuery 内蔵の JavaScript 実装が使われます。

クラスが他の属性より速い理由

クラスによるマッチングが他の属性によるマッチングよりはるかに頻繁に使われるため、ブラウザのネイティブ実装はクラスのマッチングが速くなるように最適化されています。
以前 Safari と Chrome の実装を見たときは、要素からクラス名を取り出すのがO(1)、クラス名以外の属性値を取り出すのが O(N) (Nは要素が持つ属性の数)でした。

---

パフォーマンスがそれほど気になるなら、jQuery は論外です。いっさい使ってはいけません。

Comments

[nikuatsu]

ただいま拝読致しました。詳しいご回答を誠にありがとうございます。クラスが早い理由についてより詳細に理解できました。そもそもjQueryはパフォーマンス的に微妙なのですね…

[nikuatsu]

> クラスのマッチングが速くなるように最適化されています

そうなると、データ属性を積極的に使うケースってあるのでしょうか？JSONを持たせたいときくらいですかね？

[int32_t]

たしかに data-state="ok" より class="data-state-ok" を使ったほうが querySelectorAll() は速いのでしょうけど、
多くの人は速度差を気にしてないとか、
model であるデータ構造は別にあって view である HTML に 'ul > li[data-state="ok"]' というクエリをかけるのが稀とかかもしれません。

[nikuatsu]

データ構造はHTMLと別に持っておくのが定石みたいな感じなのですね。いつもHTMLから取っていました。見直してみます。ご返信ありがとうございました。

Answer 2

:firstというのは、正式なDOMに存在しない、jQuery専用のセレクタです（jQuery公式）。

このようなセレクタが含まれていると、DOMのquerySelectorAllに直接投げることができず、JavaScriptコードでセレクタを処理する必要が出るので遅くなります。

1個だけ検索したいのであれば、最速なのはネイティブのquerySelectorです。logTimeByAFirstClassesより数倍速いです（jsFiddle）。

Comments

[maisumakun]

「jQuery内部のセレクタエンジンを使う前提であれば」、クラスで当てはまるもののほうがgetElementsByClassNameを使えるので速くなります。

とはいえ、jQueryによるセレクタ処理は、速度が最重要な場面で使うべきものではありません。

[nikuatsu]

querySelectorが早いとは、ありがとうございます。活用させて頂きます。
:firstを使っても早くならない理由も理解できました。

ところで、質問でも、リンクを貼って頂いた２つでもですが、クラスの方がデータ属性より早いのはどうしてなのでしょうか？

[nikuatsu]

> 「jQuery内部のデレク他エンジンを使う前提であれば」、クラスで当てはまるもののほうがgetElementsByClassNameを使えるので速くなります。

すれ違いで拝読いたしました。クラスの方がデータ属性より早い理由はこれですね。ありがとうございます。

> jQueryによるセレクタ処理

すみません、用語の理解があいまいで…
「jQueryによるセレクタ処理」というのは、「クラス指定」ではなく「データ属性指定」という意味でよろしかったでしょうか？

[maisumakun]

> 「jQueryによるセレクタ処理」というのは、「クラス指定」ではなく「データ属性指定」という意味でよろしかったでしょうか？

いえ、$(’セレクタ文字列’)と書くものすべてです。

[nikuatsu]

なるほど、そもそもjQueryで要素を取得するのは遅いということですね。ご返信ありがとうございます。