-2

私は最近、イベント ハンドラーをバインドする前に jquery 要素が存在するかどうかを確認することについてのブログ記事を書いていました。

私が理解していないのは、テスト2がテスト1よりもはるかに高速であることを結果が示していることです(クロムを使用してマイクロ秒で測定します)。

jsfiddle から、クリック イベントをバインドする前に、テスト 2 が一致の存在をチェックすることがわかります。

テスト 1 は次のとおりです。

console.time('time_1');
    $('.yep').click(function() {
      alert('clicked');
    });
    console.timeEnd('time_1');

テスト1はイベントをバインドしようとしました

テスト 2:

console.time('time_2');
if ($('.yep').length) {
  $('.yep').click(function() {
    alert('clicked');
  });
}
console.timeEnd('time_2');

テスト 2 バインドする前に要素が存在することを確認します。

私はいくつかの 87 で 2 ビットのコードを実行しています。「セクション」要素だと思います。そのうちの 1 つは「はい」のクラスを持っています。

より多くの作業を行っているため、2 番目のテストの方が高速である理由がよくわかりません。

結果：

time_1: 0.856ms 
time_2: 0.146ms

誰でも光を当てて、混乱している開発者を助けることができますか?

ありがとう

jquery でクリック イベントをバインドする別の方法で返信しないでください。.click は単純なテストとして使用されるだけです。

4

1 に答える 1

5

ここで主に行われているのは、セレクターを初めてクエリするとき、エンジンは後続のクエリよりも多くの作業を行う必要があるということです。これはキャッシュされる場合があります。最初の 2 つのテストを逆にすると、最初に実行した方が遅くなる傾向があることがわかります。

それにもかかわらず、主に補足として、テスト 2 では DOMを 2 回クエリしています。最初に をチェックしlength、次にハンドラーを接続します。クエリがキャッシュされていれば問題はありませんが、一度だけ実行してください。

console.time('time_x');
var yep = $('.yep');
if (yep.length) {
  yep.click(function() {
    alert('clicked');
  });
}
console.timeEnd('time_x');

ただし、click要素を含まない jQuery セットの呼び出しは無害 (エラーなどではない) であるため、表示されていない他のこともlength実行していない限り、チェックの必要はありません。

于 2012-12-14T07:12:10.317 に答える