4

我知道我只是强迫症大约几毫秒的性能时间，但我只是想知道为什么以下内容对我来说是正确的。这似乎违背了我的逻辑。

我目前有一个 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 毫秒

这违背了拥有两个函数调用会比一个慢的逻辑。另外，我在内部读过，jQuery 将第二种情况转换为第三种情况，所以第三种情况会更慢吗？

有什么想法吗？

4

1 回答 1

12

$(this).find('img')和之间的区别在于$(this).children('img')，该children函数仅查找直接 <img>后代，而该find函数查找<img>DOM 层次结构中以下任何位置的任何元素$(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! -->

如您所见，使用时不会检查三个元素children，从而提高性能。

于 2009-07-27T06:32:59.237 回答