jquery - jQuery:セレクターにコンテキストを追加することは、セレクターを改良するよりもはるかに高速ですか?

Question

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

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

以下よりも 2 倍高速です。

$('#bar li').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 のクエリに対して「ボトムアップ」(または「右から左」) のアプローチが導入されました。したがって、次の$('#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 つを見つけました。

編集:このディスカッションから、Sizzle トランク#idが最初のセレクターの特別な免除を行うことがわかりました。それをルートコンテキストとして使用して、処理を少し高速化します。これは、表示されている速度の違いをなくすことはできませんが、減少するはずです。