javascript - (为什么)使用类似 jQuery 的选择器并执行其中一个方法比查找命名函数更快？

Question

我想知道在您自己的 native JS 代码中定义一些“速记”函数是否比使用 jQuery(或任何其他返回对象的库)更快。例如，假设我想向元素添加一个类。

在 jQuery 中我会这样做:

$('#sammpleDiv').addClass('someClass');

在原生 JS 中我可以这样做:

// for simplicity's sake, the toElem parameter can only be an id
function addClass(toElem, classToAdd) {
  document.getElementById(toElem).className += ' ' + classToAdd;
};
addClass('sampleDiv','someClass');

编辑:这些是正确的 jsPerfs with simple replace & with classList回答这个问题

什么更快？根据jsPerf I made ，原生 JS 实现速度慢了 100% 以上。

那么为什么使用 $ 并返回 jQuery.fn.init 对象的新实例会更快，执行大量的查找和过滤测试以及大量的其他操作(jQuery 实际上做了什么)，然后执行它的方法之一而不是查找命名函数？

Answer 1

我在您的 jsperf 中看到两个错误，正如评论中指出的那样:

• jQuery 经过大量优化。 .addClass 只会在尚未添加时添加它。

• 您不检查它。您只是使用 += 附加它，它会在运行 10,00 次左右时创建大量字符串实例，这甚至使我的浏览器崩溃 ;)

  /li>

Dr.Molle 的修改 jsperf表明通过修复上述内容，它是最快的。

啊! Niet the Dark Absol 提供了更快的速度here .它速度很快，因为它使用原生 classList 并且不会手动检查类的可用性。