44

数か月前、この記事では、実際には Web サイト開発でクラスをまとめて回避できることが指摘されました。

私の質問は、クラス セレクターと比較して、データ セレクターはどの程度効率的かということです。

簡単な例として、 を使用した要素のクエリと を使用した要素のクエリを比較data-component='something'しclass='class1 class2 something anotherClass'ます。

セレクターは、[data-<attr>='<value>']分割する必要があるクラス文字列と比較して、値全体をチェックします。これを念頭に置いて、データ属性はより高速である必要があります。

では、質問を絞り込むために、CSS の場合、クラス セレクターとデータ セレクターのどちらを使用したほうがよいでしょうか? また、JavaScript の観点からはjQuery("[data-component='something']")、jQuery(".something")?

4

4 に答える 4

26

私はそれを決定的なものとは呼びませんが、クラスセレクターの方が高速であるように見えます...これを簡単なテストのためにまとめました。

http://jsperf.com/data-selector-performance

編集：

Vlad と私の jsperf テストに基づいて...パフォーマンスが懸念される場合 (特に IE)... クラスはまだ進むべき道です

于 2012-09-19T14:52:01.657 に答える
10

BLSully の回答と彼が提供したテスト ページを確認した後、比較のために実際の数値を以下に示します。

jQuery クラス セレクターのパフォーマンスと jQuery データ属性セレクターのパフォーマンスの 1 秒あたりの操作数:

  • Chrome 27.0.1453 で 31% 高速化
  • Firefox 15.0.1 で 140% 高速化
  • Firefox 21.0 で 131% 高速化
  • IE 9.0 で 1,267% 高速化
  • IE 10.0 で 1,356% 高速化
于 2013-05-31T09:38:53.280 に答える
4

セレクターのパフォーマンスは、現在のモバイル ブラウザーでも十分に高速であるという印象があります。データ属性またはクラスベースのセレクターを本当に多く使用する予定がない限り (その場合は、コードを再検討して、既にクエリされたセレクターをキャッシュすることをお勧めします)、それらはそれほど悪くないと考えることができます。そして、他のスタイルよりもスタイルを使用することは劇的ではないとさえ言えます.

ブラウザー ベンダーは、セレクターに対するクエリよりも、最もよく使用されるシナリオ (クラスに対するクエリ) の改善に多くの時間を費やしてきたと思います。これは変化しており、他のケースも最適化し始めても驚かないでしょう。

于 2012-09-20T08:22:00.887 に答える
-1

このすべての答えについてはわかりませんが、独自のテストを実行したところ、属性の方が高速です。

あなたはそれを自分で試すことができます.最初に時間を節約し、タスクを実行して最後の時間を取得してから計算してください.

		var newDate = new Date().getTime(); 
		$('.test-t').removeClass('act');
		$('.t1r').addClass('act');
		var currentDate = new Date().getTime();
		var diff = currentDate-newDate;
		console.log(diff);

		var newDate = new Date().getTime();
		$('.test-t2').attr('this-act','');
		$('.t2r').attr('this-act','1');
		var currentDate = new Date().getTime();
		var diff = currentDate-newDate;
		console.log(diff);

于 2016-05-27T00:59:31.550 に答える