jQueryのパフォーマンス - data-attrまたはクラスによって選択しますか？

Question

どちらが速く、なぜですか？ div（プラグインの必要性）を$('div[data-something]')または$('div.something')で選択しますか？私はそれが「クリーナー」なので前者に向かって傾いている。

this SO questionに基づいて、私は両方を使用すべきではないことを知っています。しかし、私はこれらの間に違いがあるかどうかを知りませんでした。

Answer 1

ブラウザによって異なります。ほぼすべてのブラウザがquerySelectorAllをサポートしています。できるだけjQueryが使用します。 querySelectorAllは属性プレゼンスセレクタと共に使用することができます。jQueryが必要な場合は、それをエンジンにオフロードできます。

querySelectorAllのない古いブラウザでは、明らかにjQueryはもっと多くの作業を行う必要がありますが、IE8でもそうです。これらの事のほとんどと同様に

は、あなたの最善の策は次のとおりです。

は、あなたが問題を参照してください場合は、問題、および

1. を見ていない限り、プロファイル/までそれについては心配しないでください

2. それはあなたがサポートしようとしているブラウザー上で行い、情報に基づいた決定を行います。

Answer 2

jQueryは、ブラウザでサポートされている場合、最初にネイティブgetElementByCalssNameを使用しようとするため、クラスごとに選択する方が常に属性セレクタより高速です。そうでない場合は、CSSセレクタを使用してページ内の要素を検索するquerySelectorを使用します。

Answer 3

Chrome 16以上、there is no difference。あなたが少なく、特定のクラスセレクタ（例えば$(".test")）を作る場合は、それは他の方法をアウトパフォームします：ShankarSangoliが言及しているので、私はdiv.testクラスセレクタがあることだろうと思った、やや予想外であった

もっと早く。