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

Question

我很好奇，如果有人知道哪些更有效，我只关心Firefox作为浏览器，并不需要知道这个代码在IE等不起作用...

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

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

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');
    }
}

Answer 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();
}

source来自WebKit的WebCore

Answer 2

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

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