在数组中缓存 jQuery 对象会提高速度吗？

Question

今天我正在使用 jQuery 为共享图标制作效果。效果有点复杂，所以我尝试想一种优化性能的方法。我最终将$(this) 对象缓存到数组中。

效果演示

我上传了一个使用数组缓存对象的效果示例（悬停在图标上查看效果）： http://mahersalam.co.cc/addthis/

HTML：

<div id="share-widget" class="addthis_toolbox">
    <a class="addthis_button_favorites" title="أضف للمفضلة"><div>أضف للمفضلة</div></a>
    <a class="addthis_button_facebook" title="شارك في فيسبوك"><div>شارك في فيسبوك</div></a>
    <a class="addthis_button_twitter" title="شارك في تويتر"><div>شارك في تويتر</div></a>
    <a class="addthis_button_email" title="أرسل الصفحة بالإيميل"><div>أرسل الصفحة بالإيميل</div></a>
    <a class="addthis_button_compact" title="أضغط هنا لمشاهدة المزيد من خدمات المشاركة"><div>المزيد من الخدمات</div></a>
</div>

Javascript：

// Return jQuery-obj of the share links
var shareLinks = $('#share-widget').find('a').css('opacity', 0.8);

//////////////////////////////////////////
// Only jQuery way
//////////////////////////////////////////

shareLinks.hover( 
    function () {
        $(this).clearQueue()
            .siblings()
                .stop(true,false).fadeTo('fast', 0.3)
            .end()
                .stop(true, true).fadeTo('normal', 1);
    },
    function () {
        shareLinks.delay(100).fadeTo('normal', 0.8);
})


//////////////////////////////////////////
// jQuery + Array cache way
////////////////////////////////////////// 

// Cache the array
var linksArr = [];

$.each( shareLinks, function (i) {

    linksArr.push( $(this) );

    linksArr[i].hover( function () {
        linksArr[i].clearQueue()
                    .siblings()
                        .stop(true,false).fadeTo('fast', 0.3)
                    .end()
                        .stop(true, true).fadeTo('normal', 1);
     },
    function () {
        shareLinks.delay(100).fadeTo('normal', 0.8);
    })
});

我只是想知道数组缓存对象是否会使性能更快，还是没有必要。另外，如果有人有更好的想法来制作这种效果，我会全力以赴^^。

Answer 1

在这种情况下，没有必要。更难理解 imo，甚至可能更慢。在您的代码中：

shareLinks.hover( 
    function () {
        $(this).clearQueue()
            .siblings()
                .stop(true,false).fadeTo('fast', 0.3)
            .end()
                .stop(true, true).fadeTo('normal', 1);
    },
    function () {
        shareLinks.delay(100).fadeTo('normal', 0.8);
});

你只访问一次$(this)，你为什么要缓存它？ Afaik，$(this) 无论如何都很便宜，因为它不会导致在 DOM 中进行搜索。

---

只有当您评估同一个选择器多次（例如在一个循环中）时才会有优势：

for(...) { 
   $('#share-widget div ul li > a').something(i);
}

最好写成

var $elements = $('#share-widget div ul li > a');
for(...) { 
   $elements.something(i);
}

---

更新：

关于如果你调用$(this)会发生什么，这是代码中的对应部分：

// Handle $(DOMElement)
if ( selector.nodeType ) {
    this.context = this[0] = selector;
    this.length = 1;
     return this;
}

这是almost the at the top of the function。所以它真的没有多大作用。

Answer 2

我看到的唯一caching 是当你使用这条线时

var shareLinks = $('#share-widget').find('a').css('opacity', 0.8);

通过组合可能会更快（但我对此表示怀疑，而且它是一个单一的选择器，所以这里不用担心太多）

var shareLinks = $('#share-widget a').css('opacity', 0.8);

我看到的其他所有内容都不是真正的缓存。因此，我将投入我的 0.05 美元并告诉您首先要使其可读，因为可读代码是可维护的代码。其他一切都是为了你的自我。

Answer 3

提高性能的一种方法，尤其是在链接很多的情况下，是使用 JQuery 的.delegate() 函数：

$('#share-widget').delegate('a', 'mouseenter', function() {
    $(this).clearQueue()
        .siblings()
            .stop(true,false)
            .fadeTo('fast', 0.3)
        .end()
            .stop(true, true)
            .fadeTo('normal', 1);
});
$('#share-widget').delegate('a', 'mouseleave', function() {
    shareLinks.delay(100)
        .fadeTo('normal', 0.8);
});