One of the great advancements in web page design was the development of jQuery by John Resig a few years ago. His javascript toolkit was much simpler to use than other toolkits like Dojo, and it made the difficult task of writing scripts simpler and easier to understand. However, as his toolkit has expanded and more people are using it almost exclusively, I have noticed unfortunate side-effects: web pages are a lot slower than they should be, and oftentimes they use time-consuming animations that offer no benefit to the user interface. There's a lot of "buzz" around jQuery, some of it warranted, some of it not. I recently saw a comment that "jQuery is 10 times faster than javascript". That's pretty hard to believe, especially considering that jQuery is written in javascript.

That statement was my motivation for this post. I wanted to clear up this misconception about jQuery, and hopefully, give you the ability to write the best and fastest scripts possible.

The most important thing to remember about jQuery is that it is a library. Every time you call a jQuery function, that function must be found in the library, and then executed. If the function you're calling is something that can be done in native javascript, there is a lot of overhead by using jQuery. One example is the .html() function. Since there is an innerHTML property, using .html() will take longer to execute (about 7 times longer, in fact). A few milliseconds may not seem like much, but if you're using this function a couple hundred times in a script, you've forced your users to wait an additional two seconds for your page to load! The worst offenders I've found in jQuery are the .each(), .contains(), and .animate() functions. Instead, by using for/while loops, the innerHTML and style properties, and the indexOf and setTimeout methods, you will greatly speed up your scripts. Another offender is selecting a single class name, such as $('.class') -- you should be using document.getElementsByClassName instead, though note that IE7 doesn't support this native javascript method.

jQuery is great with selectors, AJAX, and several traversing/manipulation functions. It also solves a number of compatibility issues with IE7, but these days, any serious HTML/CSS/script developer should be using IE8 as their minimum level of support (see above for one example). Using the parts of jQuery where it's useful, and native javascript where it's not, will result in feature-rich and fast code. And that's what we all want, right?

Happy coding!