javascript - 这些 jQuery JavaScript 中哪一个具有更好的性能？

Question

我有带标题的部分。单击标题会折叠并展开其下方的部分。出于样式目的，还会将类应用于或删除到 header 。这些部分和标题共有 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 库都将按照其在网站其他地方使用的方式加载。谢谢

Answer 1

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

但是，$('.header') 可以让您避免重复代码，因此是正确的选择。除此之外，它更具可读性 - 在第二个示例中，如果不查看 DOM，您甚至不知道它影响的元素在哪里。

所以，不要尝试 optimize what doesn't need to be optimized ，保持你的代码干净且可维护!