Question

我有标题部分。单击标题将折叠并展开其下方的部分。为了样式目的，还会在标题中应用或删除类。这些部分和标题中有9个。

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

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

我读过使用ID比Classes更快。以下是多快？（注意，它需要重复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，而是要保持代码清洁和可维护！

Answer 2

第二种方法略微更快，但是轻微的增益将被代码的丑陋和不可维护性所否定。

使用第一个选项。

Answer 3

<强>技术上：
在不支持getElementByClassName的浏览器中，ID引用方法是一种快得多的DOM查找。但是，必须解析两倍的代码并应用两个点击处理程序才能抵消这一点。 .live（）可能会更快，因为它只绑定到正文并稍后进行查找。

<强>实际上：
差异非常微不足道。这是微优化领域。代码中可能存在比这更大的速度因素。

Answer 4

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

哪些jQuery JavaScripts会有更好的性能？

4 个答案: