web-dev-qa-db-ja.com

データ属性のCSSセレクターはクラスセレクターよりも高速ですか？

数か月前 この記事 は、クラスがWebサイトの開発からすべて一緒に実際に避けられることができると指摘しました。

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

簡単な例は、_data-component='something'_の要素と_class='class1 class2 something anotherClass'_の要素のクエリを比較することです。

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

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

javascriptcssperformancehtmlcss-selectors
42
Vlad Nicula

私はそれを決定的とは言いません、しかしそれはクラスセレクターの方が速いようです...私はこれをまとめて簡単なテストをします。

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

[〜＃〜]編集[〜＃〜]：

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

25
BLSully

BLSullyの回答と彼が提供した test page を確認した後、比較のための実際の数値を以下に示します。

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

  • Chrome 27.0.1453で31％高速化
  • Firefox 15.0.1では140％高速
  • Firefox 21.0では131％高速
  • IE 9.0で1,267％高速化
  • IE 10.0で1,356％高速化
9
Zac

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

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

4
roy riojas

私はこのすべての答えについて知りませんが、私は自分のテストを実行し、属性はより高速です。

あなたはそれを自分で試すことができます。最初に時間を節約し、タスクを実行し、最後の時間を取得して、数学を実行します

                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);
0
Pedram Vdl