jQuery 选择器性能

发布于 2024-07-30 03:46:51 字数 646 浏览 1 评论 0原文

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

我目前有一个 div，它在悬停时淡出内部图像：

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

经过一些测试（循环选择器 1000 次，取 9 次测试的平均值）我使用了 3 个不同的选择器，得出的结论是速度按以下顺序排列：

< code>$(this).children('img') 运行最快 -avg 约 400ms；
$('img', this) - 平均约 900ms；而
$(this).find('img') 运行速度最慢 - 平均约 1000ms

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

有什么想法吗？

原文

I know I'm just being OCD about a few milliseconds worth of performance time, but I was just wondering why the following is true for me. It seems goes against my logic.

I currently have a div that has fades out the image inside on hover:

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

After some testing, (looping through selectors 1000 times, taking the average of 9 tests) I have used 3 different selectors and concluded that the speed is in this order:

$(this).children('img') runs the fastest -avg about 400ms;
$('img', this) - avg about 900ms; and
$(this).find('img') runs the slowest - avg about 1000ms

This goes against the logic that having two function calls would be slower than one. Plus, I have read that internally, jQuery converts the second case to the third case so would the third case be slower?.

Any thoughts?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

寄风 2024-08-06 03:46:51

$(this).find('img') 和 $(this).children('img') 之间的区别在于 children 函数仅查找直接后代，而 find 函数则查找任何 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时不进行检查，从而提高性能。

The difference between $(this).find('img') and $(this).children('img') is that the children function only looks for direct <img> descendants, while the find function finds any <img> element anywhere in the DOM hierarchy below $(this). That's why children is faster.

$(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! -->

As you can see, there are three elements that won't be checked when using children, thus increasing performance.

回复收藏 0 原文

~没有更多了~