It was a pretty useful video for some basics on jQuery performance Here are my notes for those that don't want to watch. Apologies for typos/inaccuracies/weir

It was a pretty useful video for some basics on jQuery performance Here are my notes for those that don't want to watch. Apologies for typos/inaccuracies/weird formatting: Why performance? 1. you want apps to be snappy(duh) 2. more work = more memory = slower apps Tip 1 Stay up to date of jQuery core. Each update usually brings performance updates ex: 1.5 bringing a complete rewrite of the ajax module Tip 2 Know your selectors. All selectors not created equal Fastest to slowest: ID selectors -> Element selectors -> Class Selectors -> Pseudo selectors Why? ID and element selectors are backed by native DOM operations. Pseudo has no browser based call. So if you're using :hidden, you are running the "find :hidden function" on every element in your select space. Parents & children - Sizzle matches selectors right to left. Slower example: $("#parent > .child").show(); This code will find all .child elements before looking to see if it's a child of #parent Faster example: $parent.children(".child").show(); This code would be faster but keep in mind it only finds direct children of $parent Tip 3 Caching = Win Example: var parents = $('.parents'); //cache parents Bad: var children = $('.parents').find('.child'); //this one does a find over the entire dom again Good: parents.find('.child'); //this one just searches through the parents obj Tip 3.5 Bonus Avoid global variables (they're slow, cause conflicts, etc) Tip 4 Use Chaining Why? Less code, easier to write, runs fast Almost all jQuery methods return a jQuery object, which allow chaining Do this: var parents = $('.parents').doSomething().doSomethingElse(); Don't do: var parents = $(.parents').doSomething(); var parents = $('.parents').doSomethingElse(); Another example: //Without chaining (finds #notification 3 times) $('#notification').fadeIn('slow'); $('#notification').addClass('.activeNotification'); $('#notification').css('margin-left', '50px'); //with chaining (finds #notification once) $('#notification').fadeIn('slow') .addClass('.activeNotification') .css('margin-left', '50px'); Tip 4.5 Bonus Use indentation to make it more readable Tip 5 Event Delegation Know the difference between 3 Types of event handling: .bind(), .live(), .delegate() .bind() simplest form of attaching function to some event (click, etc) works best with small sets of data. can take time to bind() to lots of elements does not handle dynamic data (e.g. newly created elements, etc) .bind() to table rows might not be that great browser needs to keep track of them instead, use event delgation (.live() or .delegate())on the table and let the event bubble up .live() simplest way to do event delegation best used for simple scenarios functions best with supplied selector not chainable works with dynamic data .delegate() subtle diff between live and delegate more focused way of doing event delegates (?) Tip 6 The DOM isn't a database Every DOM insertion (e.g. appending an image to the document) is costly Minimize by building Htmlstrings and using a single append() as late as possible Use detach() if doing heavy iteration with a node then re-insert when done Tip 6.5 Attaching data Common way: //convenience method that incurs overhead $('#item').data(key, value) Faster way: //significantly faster bc it's a low level method $.data('#item', key, value); Tip 7: Avoid Loops. Nested DOM selectors can perform better If it's possible avoid loops and use selector engine instead. Slow way: $('#menu a.submenu').each( function(index){ $(this).doSomething().doSomethingElse(); }); Better way (if possible): $('#menu a.submenu').doSomething().doSomethingElse(); There are places when loops can't be avoided. That's OK. Selector is faster if you can use it, however. Tip 8: Keep your code DRY (Don't Repeat Yourself) Tip 9: When in doubt, perf test jsPerf.com - Easy way to compare perf on js snippets uses benchmark.js - a neat benchmarking utility that works cross-platform easy to share code or modify other tests also useful as a js knowledge base