Question

我想知道是否定义一些＆＃39;简写＆＃39;您自己的本机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＆amp;回答此问题的with classList

什么更快？根据{{3}}，本机JS实现速度慢了100％。

那么为什么使用$并返回jQuery.fn.init对象的新实例更快，执行一堆查找和过滤测试以及许多其他操作（jQuery实际上做了什么），然后执行其中一个方法而不是查找命名函数？

Answer 1

我在你的jsperf中也看到了两个错误，如评论中所述：

jQuery经过大量优化。 .addClass只会在尚未添加时添加。
您不会检查它。您只是使用+=附加它，它会创建大量字符串实例，因为它运行了大约10,00次左右，甚至崩溃了我的浏览器;)

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

啊！ Niet the Dark Absol提供了更快的here。它很快，因为它使用本机classList并且不会手动检查类的可用性。

Answer 2

在进行测试用例时，您需要确保

两个代码完全相同;
没有错误（我的浏览器在运行测试时崩溃了。）

现在，我已经复制了jQuery用于添加类的完全相同的代码，事实上，vanilla JS更快，100％：

<强> JSPerf

之所以简单，函数调用少，条件少。使用jQuery时，使用函数调用来选择id：$('#id')，在该函数中，您有一些条件来检查是否需要创建DOM元素或使用查询选择器...可以看到相关代码here。

之后，jQuery .addClass()也有条件，因为可以使用函数作为参数。在那些条件下，他们使用更多的函数调用，减慢了进程。同样，您可以查看代码here。

现在，JavaScript已经发展，它现在有一个内置函数来添加删除类。 Niet the Dark Absol用它做了JSPerf。这是添加类的最快方法，但为什么jQuery不使用它？仅仅因为browser compatibility

（为什么）使用类似jQuery的选择器＆amp;更快？执行其中一个方法，而不是查找命名函数？

2 个答案: