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

Question

数ヶ月前、this articleは、実際にはウェブサイトの開発からクラスをすべて一緒に避けることができると指摘しました。

私の質問は、データセレクタがクラスセレクタと比較してどのくらい効率的であるかです。

単純な例は、の要素に対してdata-component='something'の要素のクエリを比較することです。

セレクタは、スプリットするクラス文字列と比較して全体として値をチェックします。これを念頭に置くと、データ属性はより高速になるはずです。

したがって、CSSの場合、クラスセレクタやデータセレクタを使用する方がよいでしょうか？そして、javascriptの観点から、jQuery("[data-component='something']")はjQuery(".something")より効率的ですか？

Answer 1

私は結論として と呼ぶわけではありませんが、クラスセレクタの方が速いと思われます...私はクイックテストのためにこれをまとめています。

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

EDIT：パフォーマンスが問題（特にIE）であればヴラドさんと私のjsperfテストに基づい

... ...のクラスはまだ

Answer 2

を移動するための方法ですセレクタのパフォーマンスは、モバイルブラウザでもすぐに十分速いという印象があります。セレクタをたくさん、データ属性やクラスベースで使用する予定がない限り（その場合は、すでにクエリされたセレクタをキャッシュしようとするためにコードを再訪することをお勧めします）、それほど悪くないと考えることができます。私は、他のスタイルよりもスタイルを使用するのが劇的ではないと言っています。

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

Answer 3

彼が提供したBLSullyの答えとtest pageをチェックした後、比較のための実際の数字がここにあります。

毎秒jQueryのデータ属性セレクタ性能操作VS

jQueryのクラスセレクタ性能：高速27.0.1453

140％速くFirefoxで15.0.1

131パーセント高速でクロームで

• 31％ IE 10.0でFirefoxの21.0
• 1267パーセント高速化IE 9.0で
• 1356パーセント速く

Answer 4

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

あなたはそれがあなたの自己はただ、最初に時間を節約する作業を行い、最終的な時間を取得、その後計算を行う

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

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