7

我很好奇是否有人知道其中哪个更有效，我只关心 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');
    }
}
4

2 回答 2

7

我认为存在检查已经由本机代码完成，因此您无需再次检查。

那么让我们看一下源代码（注：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

于 2012-10-17T15:37:08.687 回答
2

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

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

于 2012-10-17T16:22:48.933 回答