JQuery Performance Tips And Tricks

I didn't even watch it ... came here to see if someone had done a cliff notes written version.

I'd understand this if they were charging for it, but it's free shit. It was nice enough that they took the time to put the video together and post it online. Come on.

I agree, but as far as video presentations go, this one wasn't bad. There was some fairly basic, but good info there. Mr. Osmani seems pretty comfortable presenting, talking jQuery, and has a clear voice that's easy to listen to.

I do wish videos like this would come with some summary text that highlighted the main points and showed the example code used in the video, like the way Ryan does over at Railscasts.

I mean, you know it was all written up beforehand anyway, during the process of making the video, so it's not like it adds a lot of extra work.

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