2

In desktop html5 applications I write I always use jquery although I'm writing mobile html5 applications and I'm wondering if I should use jquery at all.

First, I'm curious about selectors. I have done experiments on jsfiddle and tested the speed difference between $('#item') and document.getElementById('item'). Statistically I've concluded that $('#item') is a slower than document.getElementById. For this reason I want to completely switch to writing my code without jQuery, however I read here on this question:

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

That when it comes to binding, using jQuery's .on() method is very efficient. Is jQuery's .on() method faster than addEventListener()? What about if I'm constantly adding and removing multiples of this div:

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

to the DOM. In normal javascript each time I add a new div with class item I have to rebind for that new div, but with .on() it does it for me automatically. Is this all more efficient?

Community
  • 1
  • 1
David Zorychta
  • 13,039
  • 6
  • 45
  • 81
  • 1
    Why is performance the only criteria you consider? –  Jan 10 '13 at 19:34
  • 9
    This is a really good example of **premature optimization.** jQuery on mobile devices is not necessarily a problem at all; in fact an entire mobile-oriented framework is built on top of it. – Pointy Jan 10 '13 at 19:35
  • 3
    Run tests and find out for yourself. jsperf is a great resource. – epascarello Jan 10 '13 at 19:36
  • 1
    Of course, any library , be it JQuery or any others, is always much slower than the one written in native code. – spaceman12 Jan 10 '13 at 19:38
  • You can always add the event handler to the document and check if the target is equal to the dynamic element. Essentially you do the same thing when you type `$(document).on('click', '.el', myFunc)` – Syon Jan 10 '13 at 19:38
  • All the things you have concluded were well-known to start with. I'm marking this as not constructive – Alexander Jan 10 '13 at 19:58

2 Answers2

3

Is jQuery's .on() method faster than addEventListener()?

.on() is defined in terms of .event.add(), which uses addEventListener. On one hand, these functions are slower than direct calls to addEventListener due to the overhead of argument checks and administration. On the other hand, .event.add() makes sure that calls to addEventListener are avoided whenever possible.

In your specific example (adding an item, binding an event handler, removing the item), I expect that jQuery performs slower, because the costs of .event.add() outweigh its benefits. However, it's often better to measure than to assume.

Also keep in mind that jQuery aims to be very portable. For instance, it contains a workaround for a Firefox event dispatch bug. It might not be worth your development time to test and circumvent these browser bugs yourself.

1

There are a number of tests already out there that show the differences between using jQuery and native, as well as other libraries. The basic concept is that wrappers will almost always be slower than native functions, because they create additional overhead. Here are some examples:

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

Joshua
  • 3,615
  • 1
  • 26
  • 32