重複の可能性:
コンテキストを使用した jQuery セレクターのパフォーマンス
jQuery DOCSでは、それは言う
デフォルトでは、セレクターはドキュメント ルートから始まる DOM 内で検索を実行します。ただし、$() 関数のオプションの 2 番目のパラメーターを使用して、検索用の代替コンテキストを指定できます。
私の理解に基づいてcontext、2番目のパラメーターとして渡されたものを使用した選択は、渡されたものを使用しない同じ選択よりも高速である必要がありますcontext。ただし、いくつかのテストを実行しましたが、そうではないか、少なくともそうではないようですいつもそうではありません。
$("div1, #div2")詳しく説明すると、最初は、複数の要素を一度に検索する ( ) 方が、2 つの要素を個別に検索する ( ) よりも速いかどうかを確認したかったの$("#div1") $("div2")です。context次に、 を使用した場合と使用しない場合でテストして、を使用しcontextた場合のcontext速度を確認することにしました。
たとえば、次の基本的な HTML マークアップがあるとします。
<div id="testCnt">
<div id="Div0"></div>
<div id="Div1"></div>
<div id="Div2"></div>
<div id="Div3"></div>
<div id="Div4"></div>
<div id="Div5"></div>
<div id="Div6"></div>
<div id="Div7"></div>
<div id="Div8"></div>
<div id="Div9"></div>
</div>
そして、次の JavaScript (jQuery 1.8.2、および FireBug を使用してテスト済み)
$(function () {
var $dvCnt = $('#testCnt');
var dvCnt = $dvCnt[0];
console.time('Individual without cache');
for (var i = 0; i < 10000; i++) {
$('#Div0').text('Test');
$('#Div1').text('Test');
$('#Div2').text('Test');
$('#Div3').text('Test');
$('#Div4').text('Test');
$('#Div5').text('Test');
$('#Div6').text('Test');
$('#Div7').text('Test');
$('#Div8').text('Test');
$('#Div9').text('Test');
}
console.timeEnd('Individual without cache');
console.time('Individual with $cache');
for (var i = 0; i < 10000; i++) {
$('#Div0', $dvCnt).text('Test');
$('#Div1', $dvCnt).text('Test');
$('#Div2', $dvCnt).text('Test');
$('#Div3', $dvCnt).text('Test');
$('#Div4', $dvCnt).text('Test');
$('#Div5', $dvCnt).text('Test');
$('#Div6', $dvCnt).text('Test');
$('#Div7', $dvCnt).text('Test');
$('#Div8', $dvCnt).text('Test');
$('#Div9', $dvCnt).text('Test');
}
console.timeEnd('Individual with $cache');
console.time('Individual with DOM cache');
for (var i = 0; i < 10000; i++) {
$('#Div0', dvCnt).text('Test');
$('#Div1', dvCnt).text('Test');
$('#Div2', dvCnt).text('Test');
$('#Div3', dvCnt).text('Test');
$('#Div4', dvCnt).text('Test');
$('#Div5', dvCnt).text('Test');
$('#Div6', dvCnt).text('Test');
$('#Div7', dvCnt).text('Test');
$('#Div8', dvCnt).text('Test');
$('#Div9', dvCnt).text('Test');
}
console.timeEnd('Individual with DOM cache');
console.time('Multiple without cache');
for (var i = 0; i < 10000; i++) {
$('#Div0,#Div1 ,#Div2 ,#Div3 ,#Div4 ,#Div5 ,#Div6, #Div7, #Div8, #Div9').text('Test');
}
console.timeEnd('Multiple without cache');
console.time('Multiple with $cache');
for (var i = 0; i < 10000; i++) {
$('#Div0,#Div1 ,#Div2 ,#Div3 ,#Div4 ,#Div5 ,#Div6, #Div7, #Div8, #Div9', $dvCnt).text('Test');
}
console.timeEnd('Multiple with $cache');
console.time('Multiple with DOM cache');
for (var i = 0; i < 10000; i++) {
$('#Div0,#Div1 ,#Div2 ,#Div3 ,#Div4 ,#Div5 ,#Div6, #Div7, #Div8, #Div9', dvCnt).text('Test');
}
console.timeEnd('Multiple with DOM cache');
});
ここにjsbinがあります
次のような結果が得られます
キャッシュなしの
個体: 11490ms $cache のある
個体: 13315ms DOM キャッシュのある個体: 14487ms
キャッシュなしの
複数: 7557ms $cache を使用した
複数: 7824ms DOM キャッシュを使用した複数: 8589ms
誰かが何が起こっているのかについて洞察を与えることができますか? 具体的には、jQuery コンテキストが渡されたときに検索が遅くなるのはなぜですか?
編集：
ここのアンサーのほとんど (およびcontext を使用した jQuery セレクターのパフォーマンス) は、基本的に、この例の DOM が小さすぎて実際に多くを得ることができないか、選択IDが高速になると言っています。私は両方の点を理解しています。私の質問の主なポイントは、なぜ検索がcontext 遅くDOMなるのかということです。
@pebbleが遅い理由は、jQuery がネイティブ ブラウザー メソッドを使用できないためであると示唆しました ( getElementByID)。
とにかく、クラスごとに検索するケースを追加してjsPerfにテストをダンプしましたが、今回もキャッシュを使用した複数のクラスの検索が最も高速であることに再び驚きました。