这些jQuery JavaScript中的哪一个将具有更好的性能

Which of these jQuery JavaScripts will have better performance?

本文关键字：更好 性能 哪一个 jQuery JavaScript 这些      更新时间：2023-09-26

我有带有标题的部分。单击页眉将折叠并展开其下方的部分。出于样式设置目的，还会对标头应用或删除类。其中有 9 个部分和标题。

$('.header').click(function() {
        $(this).toggleClass('open');
        $(this).next().slideToggle();
});

我试图提高移动设备的性能。我的意思不是页面加载时间，而是动画的平滑度和在触发公告之前触摸标题后的延迟。

我读到使用 ID 比类更快。接下来会快多少？（注意，它需要重复 9 次，并显示前 2 次）。我还假设使用 ID 比使用 .next（） 遍历 DOM 更快，这将产生多大区别？

$('#header1').click(function() {
        $(this).toggleClass('open');
        $('#section1').slideToggle();
});
$('#header2').click(function() {
        $(this).toggleClass('open');
        $('#section2').slideToggle();
});

注意，我知道这有点拐杖，但我想使用jQuery而不是普通的JavaScript。jQuery库无论如何都会被加载，因为它在站点的其他地方使用。谢谢

这根本不重要。虽然 ID 查找确实是最快的，但现代浏览器优化了基于选择器的查找，因此它们都非常快，除非您执行需要迭代整个文档的操作（例如[someattribute]选择器）。

但是，$('.header')使您免于重复代码，因此是要走的路。除此之外，它的可读性更强 - 在第二个示例中，如果不查看 DOM，您甚至不知道它影响的元素在哪里。

因此，与其尝试优化不需要优化的内容，不如保持代码干净且可维护！

第二种

方法会稍微快一些，但是轻微的收益将被代码的丑陋和不可维护性所抵消。

使用第一个选项。

技术上：
ID 引用方法是在不支持 getElementByClassName 的浏览器中更快的 DOM 查找。但是，由于必须解析两倍的代码量并应用两个单击处理程序，这会被抵消。.live（） 可能更快，因为它只绑定到主体并在以后进行查找。

实际上：
差异可以忽略不计。这是微优化领域。代码中可能还有比这更大的速度因素。

id 作为选择器更快，但为了可维护性，你真的想要重复的代码吗？

相关文章：