どのjQuery選択がより効率的ですか？

Question

どのセレクタセットが効率的ですか？

$('#parent_element span.class1').do_something1(); 
$('#parent_element span.class2').do_something2(); 
$('#parent_element span.class3').do_something3(); 
$('#parent_element span.class4').do_something4(); 

$parent_element = $('#parent_element'); 
$parent_element.find('span.class1').do_something1(); 
$parent_element.find('span.class2').do_something2(); 
$parent_element.find('span.class3').do_something3(); 
$parent_element.find('span.class4').do_something4(); 

私の推測では、＃2である、それは全体のDOM対親要素に焦点を当てた検索find()を始めると、よりeffecientです。これは本当ですか？

＃1より効率的にするには、その親要素への呼び出しがいくつ必要ですか？

ありがとうございます！

Answer 1

ソリューション＃2の方がはるかに効率的です。 jQueryのセレクタをキャッシュすることは、選択を行うのにかかる時間を短縮する最善の方法の1つです。 1より大きい使用の場合は、解決策2に進んでください。

Answer 2

このように、本当の答えが必要な場合は、jsperfのようなツールでテストする必要があります。テストでは、2番目のものが最初のものよりはるかに高速であることが示されています。

それらはすべて同じメソッド呼び出したか、.each(fn)方法で各1を処理することができ、あなたがこのようにそれらすべてを組み合わせることができ、セレクタの操作が大幅に高速になり場合：

$('#parent_element').find('span.class1, span.class2, span.class3, span.class4').each(fn); 

あなたはここでそれを実行することができます：http://jsperf.com/selector-options。あなたの最初のオプションはオレンジです。あなたの2番目のオプションは青です。結合されたセレクターは赤です。キャッシュされた親の方が約30-80％高速です。それらをすべて1つのセレクタに組み合わせることができれば、それは何倍も高速です。