

JQuery Performance Tips And Tricks  - ahmicro
http://ontwik.com/javascript/jquery-performance-tips-and-tricks-with-addy-osmani/

======
hellweaver666
Does anyone else hate when development information is presented as a video? I
find it incredibly annoying because I can't scan through it quickly and pull
what I want out.

Video producers, please ensure you provide a written version too!

~~~
misterbwong
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

------
PCheese
Original article: <http://addyosmani.com/blog/jquery-performance-tips-2011/>

------
mattbaker
We're flattered, Addy. <http://eng.wealthfront.com/2010/10/jquery-right-
way.html>

------
ernestipark
I just started using jQuery on something I've been developing and I've been
dying because I can get things to work, but I don't know if what I'm doing is
best practice. This definitely helps a ton!

------
Luyt
I wonder whether I'm allergic to 'Eehhh...' and 'Ahm...' interjections? When a
speaker uses them multiple times in every sentence, I only hear the Uhms and
Ehms and Ahms after a while.

------
ecaroth
kinda basic for people with a good amount of jquery experience, with many
commonly known jquery usage patterns.. but some good stuff for newer devs

