JavaScript Performance Optimization
Ezra Parker
Online ColdFusion Meetup
December 8, 2011

Who am I?
ColdFusion developer since 2000
Independent Consultant/Contractor
Associate Director of the Model-Glue framework
Co-organizer of the ColdFusion
Unconference at Adobe MAX
cf.Objective() 2012 CAB member

Two Types of Optimization
Execution
Loading

How to Make Your JS Run Faster
To optimize or not to optimize
Profiling to detect bottlenecks

What should you optimize?
"We should forget about small efficiencies, say about 97% of the time: premature optimization is the root of all evil"
-- Donald Knuth

Profiling
Firebug, Chrome Developer Tools, etc.
Home-grown timers
www.jsperf.com

General JavaScript Optimization
Variable assignments & lookups
Looping considerations
DOM manipulation

Variable Assignments & Lookups
Local variables are fast
Object properties, array indexes, function calls etc. are slower
This is often a micro-optimization

Looping
How is not likely to be important
Focus on what the loop is doing

DOM Manipulation
Repaints and reflows
Hide containing element or detach from the DOM
Use a document fragment
Style with classes

Optimizing for jQuery
More efficient selectors
How to handle events
General tips

Selectors
Use an id where possible
Don't use classes alone
“Common” wisdom: descend from an id
Using find() or a context is the way to go

Select by id when possible
$('#someId')
Uses getElementById(), thus very fast
Don't use a tag prefix: $('p#someId')

Don't use just a class selector
$('.someClass')
This requires a scan of the entire DOM to find elements
Better to add a tag if possible: $('p.someClass')
Allows for filtering with getElementsByTagName()

Isn't descending from an id helpful?
$('#someId p.someClass')
DOMElement.querySelectorAll in modern browsers
Sizzle selector library
Both parse right-to-left
More specific inner selectors
$('.class1 p.class2') is better than
$('p.class2 .class1')
No point to intermediate selectors:
$('.class1 .class2 .class3')

What are contexts?
$('.someClass', context)
Implicit context is the document root
Don't use a jQuery selector or object as the context, use a DOM node instead:
var context = $('#someId')[0];
var selected = $('p', context);
Selectors can have implicit contexts:
$(':text') == $('*:text')
$('input:text') is better

Using find() instead of a context
This selector:
var context = $('#someId')[0];
var selector = $('p', context);
Is the same as this:
var selector = $('#someId').find('p');
find() is less verbose and more
readable (IMO)

Events
Favor bind() and trigger() over convenience methods
Even better: live(), particularly with a context
Better still: delegate()
As of jQuery 1.7: on()

Use bind() and trigger()
These are equivalent:
$('#id').click(someFunction);
$('#id').bind('click', someFunction);
So are these:
$('#id').click();
$('#id').trigger('click');
Convenience methods require an
additional internal function call

Using live() can be more efficient
Instead of this:
$('#id').bind('click', someFunction);
Do this:
$('#id').live('click', someFunction);
More performant when used
with a context:
var context = $('#id')[0];
$('p', context).live('click', someFunction);

Advantages and drawbacks to live()
Will bind to dynamically-created elements
Cannot be used in conjunction with DOM traversal – this won't work:
$('#id').children().live('click', someFunction);
Implicit context is document root

delegate() fixes these issues
This statement:
$('#id').delegate('p', 'click', someFunction);
Is the same as this:
var context = $('#id')[0];
$('p', context).live('click', someFunction);
Less verbose, and can be chained
after DOM traversal

General Tips
Cache jQuery objects
Test for existence
each() can be expensive

Cache jQuery objects
If you're going to use something more than once, don't select it again – do this instead:
var element = $('#id');
element.css('color', 'red');
element.show();
Not this:
$('#id').css('color', 'red');
$('#id').show();

Test for an element's existence
If your JavaScript is included on multiple pages, test for the existence of an element before acting on it:
$(function() {
var element = $('#id');
if (element.length) {
element.show();
}
});

each()
each() is convenient, but it comes at a price
If this is a bottleneck, use native JavaScript looping instead

Improving Load Times
Implementing the ySlow Guidelines
Compression: Minification & Obfuscation
Script Loading Strategies

Script loading
A complex issue – every situation is different
<script> tags block rendering
Asynchronous loading

LABjs
Simple API for asynchronous script loading:
$LAB.script('path/to/script.js');
$LAB.wait();
$LAB.wait(function() { alert('test'); });

LABjs chaining
Chaining:
$LAB.script('js/jquery.js')
.wait()
.script('js/jquery-ui.js')
.wait(function() {
$('#myButton').button();
});

Resources
jQuery Anti-Patterns for Performance by Paul Irish:
http://paulirish.com/2009/perf/
8 jQuery Micro Optimization Tips:
http://www.codenothing.com/archives/2010/8-jquery-micro-optimization-tips/
LABjs:
http://labjs.com/
Why not just concat?
http://blog.getify.com/2009/11/labjs-why-not-just-concat/

Questions?
Contact me:
Blog
www.cfgrok.com
Email
ezra@cfgrok.com
GTalk
ezra@cfgrok.com