jquery中的缓存与链式选择器？

Posted 2023-03-05

【中文标题】jquery中的缓存与链式选择器？

【英文标题】：Cached vs chained selectors in jquery?

【发布时间】：2012-10-07 05:56:30

【问题描述】：

我想知道使用缓存选择器和使用链式选择器之间是否存在性能差异？

如果我理解正确，则链接可以正常工作，因为每个函数都返回 jquery 对象，该对象与缓存选择器中包含的内容完全相同。因此，在下面的两个示例中，性能方面不会有差异吗？

---

缓存选择器

$(function()

    $.on('click', '.disabled', function()
        $toggle = $(this);
        $toggle.attr('title', 'Object Enabled');
        $toggle.toggleClass('disabled enabled');
        $toggle.html('Enabled');
    );
);

---

链式选择器

$(function()

    $.on('click', '.disabled', function()
        $(this)
            .attr('title', 'Object Enabled')
            .toggleClass('disabled enabled')
            .html('Enabled');
    );
);

【问题讨论】：

jsperf.com - 自己尝试一下 - 或者看看其他人的结果：***.com/questions/10433014/what-is-the-cost-of-this

@ahren。 :) 谢谢这是我的问题和答案... :)

@gdoron - yeeeep，我注意到你昨天在另一个问题的答案中链接到它并阅读了 - 这是一个很好的帖子 =)

@ahren。谢谢，如果您想要其他资源，有一个问题被多次询问：this question 它是链接的答案。我在SO有一段时间没活跃了，所以我不能一直说它......你可以使用它。

【参考方案1】：

你可以看这里

http://jsperf.com/jquery-chaining

差异可以忽略不计。

连锁

$('#theDiv').addClass('test').removeClass('test');

59,874 Operations / Second

单独调用（缓存）

var d = $('#theDiv');
d.addClass('test');
d.removeClass('test');

62,021 Operations / Second

【讨论】：

这取决于浏览器......说一个比另一个更好更快是不正确的。我曾经做过这种测试......

天哪，为什么:) 怎么样！是的，jsperf 确实不错:) +1 反正人！

显然，一些旧版本的 FF 和 Chrome 的链式性能稍快，但总体而言，缓存的速度稍快。我仍然不明白，jQuery 方法总是返回 jQuery 对象本身（是否有链接），我只是猜测访问内存中的另一个点将花费更多时间，而不仅仅是在返回值上链接方法。

@FabrícioMatté。这称为抽样误差。这些测试表明，两者之间绝对没有区别！

@FabrícioMatté。顺便说一句，你可以检查我的（旧）jsperf here。你可以看到它FF，所有的方式都是平等的。

【参考方案2】：

它会有最小的差异，它取决于执行的浏览器。

“我们应该忘记小的效率，比如大约 97% 的时间：过早的优化是万恶之源”

【讨论】：

实际上同意，我只是好奇地问，不管答案如何，我都有我的编码样式:)

@Hailwood。你可以check this jsperf，你可以看到差别很小，而且因浏览器而异。

【参考方案3】：

它认为两者在性能上没有太大区别..

检查一下

jsperf Performance