4

私はちょうど数ミリ秒相当のパフォーマンス時間で OCD になっていることを知っていますが、なぜ次のことが私に当てはまるのか疑問に思っていました. それは私の論理に反しているようです。

私は現在、ホバー時に画像をフェードアウトするdivを持っています:

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

いくつかのテストの後 (セレクターを 1000 回ループし、9 つのテストの平均を取る)、3 つの異なるセレクターを使用し、速度は次の順序であると結論付けました。

  1. $(this).children('img')最速の -avg 約 400ms を実行します。
  2. $('img', this)- 平均約 900 ミリ秒; と
  3. $(this).find('img')実行速度が最も遅い - 平均約 1000 ミリ秒

これは、関数呼び出しが 2 つあると 1 つよりも遅くなるという論理に反します。さらに、jQuery は 2 番目のケースを 3 番目のケースに変換するので、3 番目のケースは遅くなるでしょうか?

何かご意見は？

4

1 に答える 1

12

$(this).find('img')との違い$(this).children('img')は、関数は直接の子孫childrenのみを検索するのに対し、関数は下のDOM階層内の任意の要素を検索することです。そのため、より高速です。 <img>find<img>$(this)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! -->

ご覧のとおり、を使用するときにチェックされない要素が3つあるchildrenため、パフォーマンスが向上します。

于 2009-07-27T06:32:59.237 に答える