jQuery：セレクタにコンテキストを追加する方がセレクタを改良するよりもはるかに高速ですか？

Question

私はセレクタにコンテキストを追加する方がセレクタを改良するよりもはるかに高速であることに気付きました。

$('#bar li').append('bla');

が、これは一般的に本当です：

$('li',$('#bar')).append('bla');

はより二倍の速いですか？セレクタにコンテキストを追加する

Answer 1

は

あなたのセレクタを精製すると、これは一般的なケースでは真であるよりも、 はるかに高速です。ただし、具体的な例に関しては、jQueryの場合は必ずしも当てはまりません< = 1.2.6。

jQuery 1.2.6以前では、セレクタエンジンは「トップダウン」（または「左から右」）の仕方で動作していました。両方のあなたの例では、この（おおよそ）のように動作することを意味：

var root = document.getElementById('bar'); 
return root.getElementsByTagName('li'); 

jQueryの1.3.xのを（すなわち、jQueryの埋め込みSizzle、）DOMを照会するintroduced a "bottom up" (or "right to left") approach。だから、$('#bar li')は今（おおよそ）は以下のようになる。

var results = []; 
var elements = document.getElementsByTagName('li'); 
for(var i=0; i < elements.length; i++) { 
    var element = elements[i]; 
    var parent = element.parentNode; 
    while(parent) { 
     if(parent.id == 'bar') { 
      results.push(element) 
      break; 
     } 
     parent = parent.parentNode; 
    } 
} 
return results 

両方のアプローチの利点と欠点があります。あなたは欠点の1つを見つけました。

編集は：ちょうどシズルトランクは今#idが最初であるセレクタの特別免除を作るthis discussionから分かりました。これは、ルートコンテキストとしてそれを使用し、少し高速化します。あなたが見ているスピードの違いを排除しなければ、これは減るはずです。