2

我有带有标题的部分。单击标题会折叠并展开其下方的部分。一个类也被应用或删除到标题以进行样式设置。其中有 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 库都会被加载，因为它在网站的其他地方使用。谢谢

4

4 回答 4

2

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

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

因此，与其尝试优化不需要优化的内容，不如保持代码的清洁和可维护性！

于 2012-05-04T09:49:28.440 回答
1

第二种方法会稍微快一点，但是代码的丑陋和不可维护性会抵消掉轻微的收益。

使用第一个选项。

于 2012-05-04T09:50:20.047 回答
1

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

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

于 2012-05-04T09:52:03.227 回答
0

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

于 2012-05-04T09:49:38.700 回答