使用 jQuery 遍历 DOM - 是否会影响性能？答案

【问题标题】：DOM traversing with jQuery - Are there performance hits?使用 jQuery 遍历 DOM - 是否会影响性能？
【发布时间】：2013-06-14 13:15:46
【问题描述】：

我目前正在将 300 多个项目加载到页面上以进行过滤。当前页面和过滤负载很糟糕。

查看代码后，我注意到我最初并没有首先引用 ID。例如：

$('.item > input:checked','#container')

现在，我的 JS 文件中一直在使用这种方法。

以下内容会提高性能吗？

$('#container > .drop-content > .item > input:checked')

如果没有，改善这一点的最佳方法是什么？

谢谢大家。

【问题讨论】：

你可以自己试试：jsperf.com。最好的方法可能是不使用 jQuery 选择器扩展（例如 :checked），以便 jQuery 可以使用本地浏览器方法（例如 querySelectorAll）。
很大程度上取决于您的 HTML。可以发一些吗？
@FelixKling 感谢这个酷网站 :)

【解决方案1】：

$('.block a') 和$('.block').find('a') 之间存在相当大的差异。

有a lot of jQuery methods for traversing。使用它们在性能方面比复杂的选择器要好得多。

【讨论】：

谢谢跳过。当使用浏览器控制台查找不同的组合时，例如 $('.item > input:checked','#container') - 快速返回 $('#container > .drop-content > .item > input:checked' ) - 快速返回 $('#container').find('.drop-content').find('.item').find('input:checked') - 慢 5 秒我可以完全获得上述语法错误的。由于要修改的文件很大，我正在寻找最佳方法。
输入中没有css类吗？拥有$('.block').find('.input_class'); 会快得多
有。我已经使用“.find()”/“.children()”等更新了整个文档，不幸的是速度没有提高。我会重新调查，因为这显然是另一回事。谢谢大家的回复。