更快地使用jquery或不使用jquery?

时间:2013-01-10 19:33:44

标签: javascript jquery performance

在我编写的桌面html5应用程序中,我总是使用jquery,虽然我正在编写移动html5应用程序,但我想知道是否应该使用jquery。

首先,我对选择器很好奇。我已经对jsfiddle进行了实验,并测试了$('#item')和document.getElementById('item')之间的速度差异。据统计,我得出的结论是$('#item')比document.getElementById慢。出于这个原因,我想完全切换到不使用jQuery编写代码,但是我在这里阅读了这个问题:

What's the difference between `on` and `live` or `bind`?

当谈到绑定时,使用jQuery的.on()方法非常有效。 jQuery的.on()方法比addEventListener()更快吗?如果我不断添加和删除此div的倍数,那该怎么办:

<div class="item"></div>

到DOM。在普通的javascript每次我添加一个新的div与类项目我必须重新绑定为新的div,但与.on()它自动为我做。这更有效吗?

2 个答案:

答案 0 :(得分:3)

  

jQuery的.on()方法比addEventListener()更快吗?

.on()是根据.event.add()定义的,a workaround for a Firefox event dispatch bug使用addEventListener。一方面,由于参数检查和管理的开销,这些函数比直接调用addEventListener慢。另一方面,.event.add()确保尽可能避免对addEventListener的调用。

在您的具体示例中(添加项目,绑定事件处理程序,删除项目),我希望jQuery执行速度较慢,因为.event.add()的成本超过了它的好处。但是,测量通常比假设更好。

还要记住,jQuery的目标是非常便携。例如,它包含{{3}}。您自己的开发时间可能不值得测试和规避这些浏览器错误。

答案 1 :(得分:1)

已经有很多测试表明使用jQuery和native以及其他库之间存在差异。基本概念是包装器几乎总是比本机函数慢,因为它们会产生额外的开销。以下是一些例子:

http://jsperf.com/node-create-native-jquery-yui/3