I have embarked on a mission to start using jQuery and JavaScript properly. I’m sad to say that historically I have fallen into the class of developer that makes a lot of really terrible mistakes with jQuery (polluting the global namespace, not caching jQuery selectors, and much more fun stuff – some of which I’m sure I have yet to discover).
The fact of the matter is that jQuery allows people to easily implement some really powerful functionality. However, because everything “just works”, performance concerns and best practices immediately take a back seat.
As I’ve been reading articles on JavaScript and jQuery performance and best practices, I’ve learned just enough to fully realize how inexperienced I really am. I’m left feeling frustrated because I’m unsure of when I should be using jQuery or just plain JavaScript. The main reason jQuery is so appealing to me is that it takes care of browser compatibility. From what I understand though, there are things you can do with jQuery that you can also do with regular JavaScript that aren’t subject to compatibility issues. Basically I’m looking for a guide that explains when using jQuery over regular JavaScript is wise.
A few questions to recap:
Are there parts of jQuery that you shouldn’t use due to performance?
What are the parts of jQuery that you should always use to avoid browser inconsistencies?
What are the parts of jQuery that you shouldn’t use because there is a reliable and faster way to do the same thing natively in JavaScript?
What are the parts of jQuery that offer multiple ways to do the same thing, with one way being more efficient? For example, the :not() selector versus the .not() method.
I’m looking for existing articles, blog posts, books, videos, etc. I know where the docs are. I read them frequently. I’m hoping for more of an overview that addresses the above issues.
Thanks!
EDIT:
Check out this very similar question: When to use Vanilla JavaScript vs. jQuery?
I definitely say
use the event model as it abstracts the differences across browsers and also provides a means to raise your own custom events too.
don’t use
.each()or$.each()unneccessarily. Sometimes it can help as it introduces a closure, but often a simple loop will suffice.the only way to know whether a complicated selector string or a bunch of chained function calls is going to be faster is to benchmark all approaches.
use event delegation when binding the same event handler to more than three elements (I’ll see if I can dig out the resource for more than three elements, I seem to remember an article that benchmarked direct binding versus delegation on a number of different factors and found more than three to be the magic numbers).
Above all else, don’t worry about performance unless it’s a problem. 200ms compared to 300ms, who’ll know the difference? 200ms compared to 1000ms, maybe time to look at optimizing something 🙂
be as specific as possible with your selectors and help those poor older versions of IE out.