jQuery .hasClass()と.is()


96

パフォーマンスの観点から、要素にクラスが割り当てられているかどうかを判断する好ましい方法はありますか?

$('#foo').hasClass('bar');

または

$('#foo').is('.bar');

6
このサイトのパフォーマンスは、複数のブラウザーでいつでも検証できます: jsperf.com ...これらは参照するテストケースです:jsperf.com/browse
iwasrobbed

回答:


164

更新:

私はコメントと非常にコメントする4つの賛成票の後にテストをコミットしました。私が言ったことは正解であることがわかりました。結果は次のとおりです。

ここに画像の説明を入力してください

http://jsperf.com/hasclass-vs-is-so


isあなたは、たとえば行うことができ、多目的であるis('.class')is(':checked')などその手段isがある以上やっている場合hasClass、クラスのためにのみチェックがセットまたはないというその限定されています。

したがって、hasClass任意のレベルのパフォーマンスを優先する場合は、より高速になるはずです。


7
それが速いという証拠はありますか?関数の機能が少ないからといって、自動的に高速になるわけではありません。
クリス

15
@クリス:はい、そうです:jsperf.com/hasclass-vs-is-so。私が言ったように、hasClass ある多くの速いです。
Sarfraz

4
'はるかに速い' => 'はるかに速い'
Kirk Strobeck

@SgtPooki、私は単に証拠を求めていました。もしそれが本当なら理由を知りたかった。私はそのように好奇心旺盛です:) あなたは簡単により多くの機能を持ち、それをより速くすることができます。それは常に実装に依存します。あなたの99%は抜本的な一般化であり、必ずしもソフトウェア開発の真の状態ではありません。「jQueryはまっすぐなJavaScriptと同じくらい速いのでしょうか?いいえ以外の答えは間違っています。」良い質問ではありません。jQueryには実際に多くの最適化があり、データがキャッシュされるとDOM要素へのアクセスが高速になります。実際の使用方法によって異なります。
クリス

1
@SgtPookiは、できるだけ早くシズルセレクターエンジンを確認します。引き続き説明しますが、それは実装に依存し、クエリをネイティブでサポートしていない古いブラウザーでは、ネイティブバージョンがないため(デフォルトで勝つ)、jQueryの実装を介した方が高速になる可能性があります。また、ブラウザーとバージョンによっては、同じDOM要素を繰り返し呼び出している場合、jQueryがこの要素をキャッシュして高速に取得できるため、さらに時間がかかることがあります。通常、ネイティブJavaScript関数はより高速です。ただし、ブラウザのサポートと実装によって異なります。
クリス2013年

13

以来isより汎用的でhasClassかつ用途filter提供表現を処理するために、可能性が高いように思わhasClass速いです。

Firebugコンソールから次のコードを実行しました。

function usingIs() {
for (var i=0; i<10000;i++) {
 $('div#example-0').is('.test');
}
}

function usingHas(){
for (var i=0; i<10000;i++) {
 $('div#example-0').hasClass('test');
}
}

usingIs();
usingHas();

私が得た:

  • usingIs:3191.663ms
  • usingHas:2362.523ms

大きな違いではありませんが、多くのテストを行っている場合は関連があるかもしれません。

「大きな違いではない」と言ったときに編集してください。私のポイントは、0.8秒の違いを確認するには10000サイクル実行する必要があるということです。からisに切り替えるhasClassと、すべてのパフォーマンスが大幅に改善されるようなWebアプリケーションが表示されて驚いています。ただし、これは速度が35%向上することを認めます。


9

どちらもパフォーマンスの点ではかなり近いはずですが$('#foo').hasClass('bar');、私には読みやすく、意味的に正しいようです。


弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.