JQuery 性能：删除类答案

【问题标题】：JQuery Performance: removing classJQuery 性能：删除类
【发布时间】：2017-12-06 19:16:27
【问题描述】：

我有 JS 运行以从表单元素的所有后代中删除“已修改”类。哪个表现更好？

$form.find('*').removeClass('modified');

或

$form.find('.modified').removeClass('modified');

或者有更好的方法吗？

谢谢！

【问题讨论】：

自己试试jsperf.com
一开始只对那个类感兴趣，为什么还要查询所有元素？
@charlietfl，也许所有元素都有那个类：P
表单中有多少元素？如果小于 2000，您将不会注意到差异。如果超过2000，你的表格有问题！即，除了纯粹的教育原因，不要对不需要的东西进行微优化。
@freedomn-m 我的兴趣有点教育性。对于它的所有方法，JQuery 通常会对每个元素执行内部检查，以查看是否真正需要执行任何操作。想知道是否值得通过 CSS 选择进行两次检查。从接受的答案听起来是这样！

标签： javascript jquery performance jquery-selectors

【解决方案1】：

第二种方式 (.find('.modified')) 在性能方面更好，适用于所有主要桌面浏览器（Opera、IE、Edge、Chrome、Firefox、Chromium，未测试移动浏览器）。

Google Chrome 61：22K 操作/秒与 214K 操作/秒。
Firefox 55：26K 操作/秒与 342K 操作/秒。
Chromium 59：21K op/s 与 184K op/s。
Opera 46.0：22K op/s 与 198K op/s。
Edge 25.10586.672：5K op/s 与 64K op/s。
IE 11.962.10586：6K op/s 与 117K op/s。

可能因浏览器而异。

这是测试设置： https://jsperf.com/jquery-remove-classes/1

【讨论】：

如果它可能因浏览器而异，我不确定您是否真的想客观地说一种方式是更好。
@BoltClock 我编辑了我的答案以指定在所有主要桌面浏览器中，不搜索所有表单内容的功能每次都更好。

【解决方案2】：

如果您正在寻找性能，我会尝试使用原生 JavaScript。下面的脚本应该执行得非常快，但老实说，我现在没有时间测量性能。无论如何，这是一个香草 JS 版本：

var form_elem = document.getElementById('form');
var elements = form_elem.getElementsByClassName('modified');

while(elements.length > 0){
    elements[0].classList.remove('modified');
}

<form id="form">
<span class="modified">1</span>
<span class="modified">2</span>
<span class="modified">3</span>
<span class="modified">4</span>
<span class="modified">5</span>
<span class="modified">6</span>
<span class="modified">7</span>
<span class="modified">
    <span class="modified">
        <span class="modified">9</span>
    </span>
</span>
</form>

【讨论】：

如果您正在寻找性能，这显然是最佳解决方案 OP。这种方法应该总是比最好的库快 8-10 倍（我将它添加到 the benchmark ）。
是的，我就是这个意思。在 99% 的时间里，没有什么能比香草 JS 更好:-)