より速い$（ "s1"）find（ "s2"）find（ "s3"）または$（ "s1 s2 s3"）？

jQueryは、特定のDOM要素を選択する場合、多面的です。今日では、同じ要素を得るための2つの方法が異なる速度をもたらすことが私の注意に来た：

$("selector1").find("selector2").find("selector3")

と

$("selector1 selector2 selector3")

（ selectorXは、IDやクラスまたは何か他のことができます）

どちらも同じ要素を生成しますが、速度の違いはありますか？ jQueryは実際にDOMをどのようにトラバースしますか？これは第2のケースでは特に重要です：それはの逆のセレクタ1からセレクタ3またはですか？

誰かが2つの違いを測定しましたか？

出典

2011-05-05 Robert Koritnik

は約2倍の高速なChromeで私のため$.find()の連鎖などです。このJSPerf Benchmarkは、他のブラウザの良いアイデアを提供します。

出典

2011-05-05 16:03:24

観察されたさまざまなブラウザと結果で実行できる実行可能なテストを提供してくれてありがとう。 –

私のFF4テストでは、 'find（）。 'を使うとコンパウンドセレクタよりも21％遅いと言われています。 –

これまでのところ、Chrome/IEの最大の違いのようです。 –

自分で時間を見つけてください！単一$('...')を使用して

console.time("Selector 1") 
    $("selector1").find("selector2").find("selelector3"); 
console.timeEnd("Selector 1") 

console.time("Selector 2") 
    $("selector1 selector2 selector3"); 
console.timeEnd("Selector 2")

出典

2011-05-05 15:59:01 HurnsMobile

別途実行してください。ブラウザの実装によっては、最初のテストの作業が2番目のテストの作業に影響する可能性があります。 –

@mattcode：セレクタの結果をキャッシュしないと、私はあなたに誤解されるかもしれませんが、 –

良い点は、別々にテストする必要があります。 D – HurnsMobile

クラスを使用している場合、2つの違いがあります。 $("selector1 selector2 selector3")は、document.getElementByClassnameのサポートがないために、セレクタのいずれか（またはすべて）がクラスである場合、IEで遅くなります。 IE $("selector1").find("selector2").find("selector3")では、selector1がクラスの場合（以前と同じ理由で）、処理速度が遅くなります。 IEとjQueryコードで利用可能なさまざまなメソッドのため、クロスブラウザのタイミングを見つけることはできません。

出典

2011-05-05 16:04:27 scrappedcola

http://jsperf.com/nested-find-vsに従って '$（ '。class1 ...'）'が実際に最も速いです。 IDよりも高速です。 –

@jcmの調査結果を確認した後、これらのセレクタをさらにテストすることにしました。私は、より複雑なDOM構造がはるかに異なる結果を生み出すという前提に立ちました。

は、ここで私はhttp://jsperf.com/complex-dom-jquery-selectors-vs-traversal-methods

これは、最新のjQuery（バージョン1.6）を使用し作成したテストです。 .find()は他のトラバーサルメソッドよりも飛躍的に飛躍しているようです。これは非常に興味深いニュースです。長い間、jQueryの多くのユーザー（自分自身を含む）は、セレクタ文字列の代わりにトラバーサルメソッドを使用する必要があるというアドバイスを提供しました（通常はfindメソッドを避ける）。そんなに！

ここで学ぶべきことは、歴史的証拠だけに依存するのではなく、絶対的なパフォーマンスが必要なときに、仮説をテストすることです。

出典

2011-05-06 15:24:41 Stephen

より速い$（ "s1"）find（ "s2"）find（ "s3"）または$（ "s1 s2 s3"）？

答えて

関連する問題