jQuery中的缓存选择器 vs 链式选择器？

Question

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

如果我理解正确，链式选择器之所以起作用是因为每个函数返回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');
    });
});

- Hailwood

---

http://www.jsperf.com - 试一下自己 - 或者只是看看其他人的结果：https://dev59.com/82kv5IYBdhLWcg3wqimS - ahren

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

@gdoron - 嗯，我注意到你昨天在回答另一个问题时链接了它，并阅读了一下 - 这是一篇好文章 =) - ahren

@ahren。谢谢，如果您需要另一个资源，这里有一个问题被问了很多次：这个问题和它链接的答案。我在SO上已经有一段时间没有活跃了，所以我不能一直说...你可以使用它。 - gdoron

Answer 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

- Ohgodwhy

---

这取决于浏览器...不能说一个比另一个更好-更快。我曾经做过那种测试... - gdoron

哦，我的天啊，为什么 :) 怎么样！是的，jsperf确实很好 :) +1 无论如何，伙计！ - Tats_innit

显然，一些旧版本的FF和Chrome具有稍微更快的链式性能，但总体而言，缓存的性能略微更快。尽管如此，我仍然不理解，jQuery方法始终返回jQuery对象本身（无论是否进行链接），我只会猜测访问内存中的另一点比在返回值上链接方法需要更多时间。 - Fabrício Matté

@FabrícioMatté，这被称为抽样误差。这些测试告诉你两者之间绝对没有差异！ - gdoron

@FabrícioMatté。顺便说一下，你可以在这里检查我的（旧）jsperf [here]（http://jsperf.com/this-cost）。你可以看到，在FF中，所有方法都是相等的。 - gdoron

Answer 2

这将几乎没有任何区别，并且取决于执行浏览器。

"我们应该忘记小的效率问题，大约97%的时间：过早优化是万恶之源"

- gdoron is supporting Monica

---

其实我同意，我只是出于好奇才问的，无论答案如何，我都有自己的编码风格 :) - Hailwood

@Hailwood。你可以查看这个 jsperf，你会发现差异非常小，而且在不同的浏览器中也会有所不同。 - gdoron

Answer 3

我认为这两者之间的性能差异不大。

请查看

jsperf Performance

- Sushanth --