20

関数のスコープ内で jQuery セレクターの結果に複数回アクセスする必要がある場合、セレクターを 1 回実行してローカル変数に割り当てることをお勧めしますか?

ここで私の陳腐な例を許してください、しかしそれは質問を説明していると思います。したがって、このコードはより高速に実行されますか?

var execute = function(){
    var element = $('.myElement');
    element.css('color','green');
    element.attr('title','My Element');
    element.click(function(){
        console.log('clicked');
    });
}

このコードより:

var execute = function(){
    $('.myElement').css('color','green');
    $('.myElement').attr('title','My Element');
    $('.myElement').click(function(){
        console.log('clicked');
    });
}

違いがない場合、その理由を説明できる人はいますか? jQueryは要素を選択した後に要素をキャッシュするので、後続のセレクターはdomを再度検索する必要はありませんか?

4

5 に答える 5

21

最初のケースであるセレクタ参照の再利用は、間違いなく高速です。証拠として私が行ったテストは次のとおりです。

http://jsperf.com/caching-jquery-selectors

セレクターを再定義する後者のケースでは、最大 35% 遅いと報告されています。

于 2012-04-07T14:15:57.157 に答える
9

これを忘れないでください：

var execute = function(){ 
    $('.myElement')
        .css('color','green')
        .attr('title','My Element')
        .click(function(){ 
            console.log('clicked'); 
        });
}
于 2012-04-07T14:19:51.830 に答える
3

参照をローカル変数に格納すると、毎回選択コードを実行するよりも高速になります。変数に格納するときに、適切な要素を見つけるためにコードを実行する必要がないという単純な問題です。私の経験則では、jQuery ルックアップを複数回使用する場合は、その結果を変数に格納します。

于 2012-04-07T14:10:38.837 に答える
1

ここでの別のオプションはeach、セレクターを繰り返す代わりに使用することです。これは、何度も何度も関連する作業です

var execute = function(){
    $('.myElement').each(function() {
      var elem = $(this);
      elem.css('color','green');
      elem.attr('title','My Element');
      elem.click(function(){
        console.log('clicked');
      });
    });
}
于 2012-04-07T14:13:02.440 に答える