estella

Scaling back on jQuery and other JavaScript libraries

I'm observing a trend in blogs and presentations: scale back on libraries like jQuery.

In his popular presentation called "Enough With The JavaScript Already!," Nicolas Zakas points out that JavaScript is bloating our bandwidth, and we're not even using it all. Evan Hahn reminds us of some of jQuery's equivalent native DOM methods. Chris Love gently states, "In many ways thanks to jQuery, jQuery itself is no longer needed."

I was curious about how jQuery and Zepto stack up against native DOM methods. Obviously, the native methods will perform better, but I was surprised at how much better. In full front-end applications like my own website, this can actually make a difference.

First I tested fetching an element by ID:

getElementById()querySelect()$("#")Zepto $("#")
Chrome6ms35ms110ms167ms
Firefox13ms90ms505ms297ms
Safari17ms176ms310ms945ms
IE947ms2745ms177ms×
IE1055ms4023ms132ms×
Performance results for fetching an element by ID.

Then I tested fetching elements by class name (I didn't test Zepto in IE here):

getElementByClassName()querySelectAll()$(".")Zepto $(".")
Chrome7ms1515ms169ms377ms
Firefox18ms1857ms802ms475ms
Safari19ms1451ms920ms993ms
IE996ms4142ms423ms×
IE1068ms4029ms309ms×
Performance results for fetching an element by CSS class name.

I was surprised to see how badly the native document.querySelect() and document.querySelectAll() methods faired. I'd expect performance for these to improve over time though.

It's unclear why Zepto was so much slower for some tests. I expected it to do better than jQuery. I'll have to dig into this one.

How did I measure performance?

I used a very basic approach, executing each selector 10,000 times and taking advantage of the built-in console.time and console.timeEnd methods (I had to measure time manually for IE):

I can't imagine giving up jQuery just yet, but I would love to, for now, just use the Ajax and CSS APIs. And I'd also like to see Ember use native selectors more frequently.