使用 JavaScript 添加删除类的最有效方法答案

【问题标题】：Most efficient way to add remove classes with JavaScript使用 JavaScript 添加删除类的最有效方法
【发布时间】：2012-10-07 22:08:43
【问题描述】：

我很好奇是否有人知道其中哪个更有效，我只关心 Firefox 作为浏览器，不需要知道这段代码在 IE 等中不起作用...

基本上，我会根据输入字段的值显示和隐藏 DOM 元素，如果您愿意，可以进行即时搜索。如果没有显示搜索结果，我需要显示或隐藏“未找到”元素。我很好奇在修改其类属性之前检查“未找到”元素是否处于正确状态或仅修改类属性是否更便宜（更有效）。

问题：我是否应该在每次运行函数时删除/添加隐藏类，即使元素的类属性没有变化？

if (shown_count > 0) {
    element.classList.add('hidden');
}
else {
    element.classList.remove('hidden');
}

或者我应该在实际更新之前检查元素是否需要更新其类属性？

if (shown_count > 0) {
    if (element.classList.contains('hidden') == false) {
         element.classList.add('hidden');
    }
}
else {
    if (element.classList.contains('hidden')) {
         element.classList.remove('hidden');
    }
}

【问题讨论】：

我相信，使用 jsperf 或类似方法创建基准会比我们更好地回答您的问题。
好问题。看起来它可能取决于在任何给定查询中需要更改的元素百分比。例如，如果 100% 需要更改，第一个显然更有效。如果少于 100% 需要改变，答案可能会改变。
Aakil，我不是要显示/隐藏实际的搜索结果，而是我要问的是我是否应该每次都在函数末尾修改一个元素的类属性，或者只修改什么时候应该改变课程。

标签： javascript performance firefox dom-manipulation

【解决方案1】：

我认为存在性检查已经被原生代码完成了，所以你不需要再次检查。

那么我们看一下源码（注：classList是DOMTokenList对象）

String DOMTokenList::addToken(const AtomicString& input, const AtomicString& token)
{
    if (input.isEmpty())
        return token;

    StringBuilder builder;
    builder.append(input);
    if (input[input.length()-1] != ' ')   // <--- check happens here
        builder.append(' ');
    builder.append(token);
    return builder.toString();
}

来源来自 WebKit 的 WebCore

【讨论】：

有任何证据或文件来支持这一点吗？我相信你是正确的......但想确定一下。谢谢
我不确定 WebKit 的来源与这个问题有什么关系（特别是关于 Firefox）。甚至对于 WebKit，您正在查看错误的功能。你想要ClassList::addInternal。但是是的，规范要求类列表上的add() 方法在添加之前检查该类是否已经存在。所以它不会重复添加。
@BorisZbarsky 我只是以WebKit的源代码为例，WebKit中的classList不是DOMTokenList吗？我在 chrome 中得到它，所以我认为它是 DOMTokenList。
实现是DOMTokenList 的子类，它覆盖了各种方法。但关键是您引用的代码不会执行任何类型的“令牌已经在列表中”检查。该检查发生在ClasList::addInternal。
嗯，除了浏览器的特殊性和确切的源代码之外，xdazz 是正确的，我的 jsperf 测试表明，请在jsperf.com/add-remove-class-performanci查看它

【解决方案2】：

在 jsperf 上运行一些测试后，答案很简单，即第一个选项更快。可能由于 xdazz 的回答，classList.add 方法已经进行了检查。

这是性能测试的链接：http://jsperf.com/add-remove-class-performanci

【讨论】：