I'm observing a trend in blogs and presentations: scale back on libraries like jQuery.
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:
Then I tested fetching elements by class name (I didn't test Zepto in IE here):
I was surprised to see how badly the native
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.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.