jQueryセレクタのパフォーマンス

Question

私はちょうど数ミリ秒相当のパフォーマンス時間についてOCDになっていることを知っていますが、なぜ私が次のことが当てはまるのだろうと思っていました。それは私の論理に反するようです。私は3つの異なるセレクタを使用していた（9回の試験の平均を取って、セレクタを介して1000倍のループ）、いくつかのテスト後

$('div.someclass').hover(function() { 
    $(this).children('img').fadeOut(function(){ 
     // do something 
    }); 
}, function() { 
    // do something 
}); 

：

私は現在持っているホバーに内部画像をフェードアウトDIVを有します

1. $(this).children('img')は、約400msで最速の-avgを実行することを確認しました。
2. $('img', this) - 平均約900ms;およそ1000msで

平均これは、2つの関数呼び出しを有するものよりも遅くなるだろうとの論理に反する - と

$(this).find('img')は最も遅い実行されます。さらに、私はこれを内部的に読んだことがあります.jQueryは2番目のケースを3番目のケースに変換するので、3番目のケースは遅くなりますか？

どのような考えですか？

Answer 1

$(this).find('img')と$(this).children('img')の違いはfind機能が$(this)以下DOM階層のどこにどんな<img>要素を見つけながらchildren機能のみ、直接<img>の子孫を探していることです。だからこそchildrenが高速です。

$(this).children('img')

：

<h1>       <!-- Is this img? Nope! --> 
    <img alt="" src="..." /> <!-- Never checked. --> 
    <span>Bla bla</span>  <!-- Never checked. --> 
</h1> 
<a href="#">     <!-- Is this img? Nope! --> 
    <img alt="" src="..." /> <!-- Never checked. --> 
</a> 
<img alt="" src="..." />  <!-- Is this img? Yeah, return it! --> 

$(this).find('img')：

<h1>       <!-- Is this img? Nope! --> 
    <img alt="" src="..." /> <!-- Is this img? Yeah, return it! --> 
    <span>Bla bla</span>  <!-- Is this img? Nope! --> 
</h1> 
<a href="#">     <!-- Is this img? Nope! --> 
    <img alt="" src="..." /> <!-- Is this img? Yeah, return it! --> 
</a> 
<img alt="" src="..." />  <!-- Is this img? Yeah, return it! --> 

あなたが見ることができるように、このように、childrenを使用してパフォーマンスを向上させるときにチェックされることはありません三つの要素があります。