分类导航

jQuery 发布时间：2022-04-19 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了jQuery选择器性能，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

我知道我只是在OCD上花了几毫秒的性能时间,但我只是想知道为什么以下对我来说是真的.这似乎违背了我的逻辑.

我目前有一个div,它在悬停时淡化了里面的图像：

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

经过一些测试,(通过选择器循环1000次,取9次测试的平均值)我使用了3种不同的选择器,得出的结论是速度是这样的：

> $(this).children(‘img’)运行速度最快-avg约400ms;
> $(‘img’,this) – 平均约900ms;和
> $(this).find(‘img’)运行速度最慢 – 平均约1000ms

这违背了两个函数调用慢于一的逻辑.另外,我已经在内部阅读,jQuery将第二种情况转换为第三种情况,那么第三种情况会更慢吗？

有什么想法吗？

解决方法

$(this).find(‘img’)和$(this).children(‘img’)之间的区别在于children函数只查找直接< img>后代,而find函数找到任何< img> $(this)下面的DOM层次结构中的任何位置.这就是孩子们更快的原因.

$(本).儿童( ‘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! -->

$(本).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! -->

如您所见,使用子项时不会检查三个元素,从而提高性能.