如何在 jQuery 中使用 document.querySelectorAll() 来提高性能？答案

【问题标题】：How to use document.querySelectorAll() into jQuery for performance?如何在 jQuery 中使用 document.querySelectorAll() 来提高性能？
【发布时间】：2021-01-21 14:48:27
【问题描述】：

我了解到通过切换到 document.querySelectorAll() 而不是使用 jQuery 的本机选择器可以显着提高性能。

对于涉及数千个元素和嵌套循环等的实例，在 jQuery 中执行以下操作是否会带来任何性能优势？

//using querySelectorAll

elems = document.querySelectorAll('.element');
$(elems).addClass("className");

相对于做：

//traditional jQuery
elems = $(".element");
$(items).addClass("className");

如果没有，我们可以通过什么方式将document.querySelectorAll 合并到 jQuery 中？

【问题讨论】：

唯一的问题是，querySelectorAll 不返回 jQuery 对象的集合，因此没有 .addClass() 方法。 Uncaught TypeError: document.querySelectorAll(...).addClass is not a function... 所以你也必须自己写。归根结底，您可以选择使用 jQuery 及其便捷方法的简单模式，或者完全摆脱 jQuery 的硬核性能模式。
您的第一个代码必须转换为document.querySelectorAll('.element').forEach(ele => ele.classList.add('className'))
@JeremyThille $(elems) 将其转换为具有.addClass() 的jQuery 对象。
@trippyyyreddd 在你的第二个 sn-p 中，$(items) 应该是 elems（不需要 $()，因为它已经是一个 jQuery 对象）。
@JeremyThille 为了方便使用.addClass() 和.hide() 等方法，而不必编写循环和条件。

标签： javascript jquery performance jquery-ui

【解决方案1】：

是的，它应该可以工作。 $(elems)会从NodeList创建一个jQuery集合对象，然后你就可以在上面使用jQuery方法了。

但是，我认为不会有您期望的那么多好处。 jQuery 已经在可行的情况下调用了querySelectorAll()。在确定 QSA 是否可用于给定选择器时可能会有少量开销。但是 jQuery 缓存了这个结果，所以如果你经常使用选择器，开销就会减轻。

【讨论】：