JQuery 性能：删除 class

Question

我有 JS 运行以从表单元素的所有后代中删除 class "modified"。哪个效果更好？

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

或

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

或者有更好的方法吗？

谢谢！

Answer 1

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

Google Chrome 61：22K operation/s 对比 214K operation/s.
Firefox 55：26K op/s 对比 342K op/s.
Chromium 59：21K op/s 对比 184K op/s.
Opera 46.0：22K op/s 对比 198K op/s.
边缘 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

Answer 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>

JQuery 性能：删除 class

JQuery Performance: removing class

javascript

performance

jquery

jquery-selectors