jQuery要素を変数に格納する方が効率的ですか？

Question

どちらがより効率的ですか？

var myElement = $("#the-name-of-my-element") 

myElement.doSomethingOnce; 
myElement.doSomethingTwice; 
... 
myElement.doSomethingTenTimes; 

または

$("#the-name-of-my-element").doSomethingOnce; 
$("#the-name-of-my-element").doSomethingTwice; 
... 
$("#the-name-of-my-element").doSomethingTenTimes; 

私は、HTML要素を変数に要素を格納する複数のjQueryを防止している場合ので、私は「思ったんだけどJSと多くの様々な、時には繰り返し相互作用を持っているページを持っていますクエリ "。

私のプロジェクトはウェブアプリケーションなので、ブラウザのためにできることを調整したいと思っています。

Answer 1

ノードをキャッシュするのは常に良い方法です。 JSエンジンがノードを見つけるために必要な作業量は、ノードの格納に使用するメモリよりも高価です（大量のDOMツリーなどを格納している場合を除きます）。

だから、勝者は次のとおりです。

var myElement = $("#the-name-of-my-element") 

myElement.doSomethingOnce; 
myElement.doSomethingTwice; 
... 
myElement.doSomethingTenTimes; 

Answer 2

$("#the-name-of-my-element")を毎回dom要素検索を行う。

var myElement = $("#the-name-of-my-element")を使用すると、dom要素の検索が1回だけ実行され、変数に格納されます。次回は、より速くアクセスされ、呼び出される追加機能はありません。

結論として、変数を複数回使用する必要がある場合は、その要素を毎回検索するより効率的です。

Answer 3

あなたはそれがJSを再選択しないようにすべての呼び出しでの要素を変数にキャッシュする方が良いでしょうよりも、同じ要素に複数のタスクを実行している場合。

また、コードを管理する方が簡単です（例：セレクタを変更する場合は、コードを検索して検索するのではなく、1か所で変更する必要があります。

Answer 4

と$("#the-name-of-my-element") jQueryは、セレクタルールに適用されるすべての要素を見つけるためにdomツリー全体を走査しています。

したがって、結果を変数に入れて、同じセレクタを使用する代わりにその結果を使用すると、より効率的になります。

警告：呼び出されたメソッド（doSomeThing..()）のいずれかが同じセレクタで新しい要素を追加した場合、この要素は処理されません。限り、それは罰金、IDだが、クラス（".someclass"）

Answer 5

jQueryをしないのキャッシュセレクタ使用する際に問題がある可能性がありますよう - この質問で説明するように：結果

Does jQuery do any kind of caching of "selectors"?

、それぞれをあなたが実行する時間$("#the-name-of-my-element") jQueryは、セレクタと一致するようにいくつかの作業を実行しています。

普通のコード以外は、常にセレクタをキャッシュします。

...また

At what level should I cache results of jQuery DOM queries?

を参照してください。