classList.remove() peform比className字符串操作更糟糕

Question

为了从元素中移除类，

elem.classList.remove("test");

似乎表现不如

var removeCssClass = function(elem, cName) {
    var a = " " + elem.className + " ",
    b = a.indexOf(" " + cName + " ");

    if (b >= 0) {
       elem.className = (a.substr(0, b) + " " + a.substring(b + cName.length + 1, a.length)).trim()
    }
}
removeCssClass(elem, "test");

快速工作台https://jsbench.me/yhkmn56aox/1

在Chromium和Firefox上，我都知道字符串操作版本更快。考虑到classList.add()比elem.className += " someClass"快得多，我有点惊讶。我意识到我对抽象概念没有真正的理解。

铬DOMTokenList实现：https://chromium.googlesource.com/chromium/blink/+/master/Source/core/dom/DOMTokenList.cpp

火狐DOMTokenList实现：https://searchfox.org/mozilla-central/source/dom/base/nsDOMTokenList.cpp

我不知道我如何开始尝试理解为什么一个版本比另一个版本更快。我假设JS字符串操作是“在JS中”完成的(由V8/SpiderMonkey执行)，但是elem.className的最后任务是绑定/互操作。同样，我假设elem.classList.remove()只是简单地绑定到上面的实现。

据了解，在JS停止执行之前，添加/删除类的浏览器处理/处理都不会起作用，因此浏览器作为重呈现过程的一部分的任何后续处理都无法解释。(是这样吗？)

我怎样才能在引擎盖下面看一看，更好地了解正在发生的事情呢？

Answer 1

请记住，您的测试是不等效的。

• 不确定基准测试站点做什么，但我不认为它在每次测试之后重新添加了HTML，所以您实际上只是在测试我的机器上每个代码
• 的早期退出，使用火狐，我可以获得classList作为执行重复类的更好的
• --您的代码只会删除第一个类，而.remove将删除所有这些代码(

< code >f 29)。