Professional Documents
Culture Documents
PERFORMANCE
TIPS & TRICKS
ABOUT ME
JavaScript & UI Developer at Aol
Enough of that..
LETS START!
MORE WORK =
MORE MEMORY USE =
SLOWER APPS.
PERFORMANCE TESTING
http://jsperf.com/jquery-tree-traversing
PERFORMANCE TIP
STAY UP TO DATE!
Always use the latest version of jQuery
core where possible.
Old
INTERESTING FACTS
Performance improvements and new
WHY?
Older versions wont offer these instant
performance benefits
1.4.4
1.6.2
$(.elem)
$(.elem, context);
context.find(.elem);
0
27500
55000
82500
110000
http://jsperf.com/jquery-1-4-2-vs-1-6-2-comparisons
1.6.x improvements
Note
PERFORMANCE TIP
getElementsByClassName() not
supported in IE5-8
http://www.quirksmode.org/dom/w3c_core.html
http://www.quirksmode.org/dom/w3c_core.html
querySelectorAll()
Allows searching the DOM for elems based
on a CSS selector in modern browsers.
1.6.2
ID
Class
Descendent tag
Attributes
Input/form select
:nth-child
0
75000
150000
225000
300000
http://jsperf.com/dh-jquery-1-4-vs-1-6/6
Pseudo-selectors
are powerful..but
slow, so be careful
when using them.
Be careful because..
PERFORMANCE TIP
UNDERSTAND PARENTS
AND CHILDREN
1) $(.child", $parent).show(); //context
2) $parent.find(.child).show(); //find()
3) $parent.children(".child).show(); //immediate children
4) $(#parent > .child).show(); //child combinator selector
5) $(#parent .child).show(); //class selector
6) $('.child', $('#parent')).show(); //created context
Context
1) $(.child, $parent).show();
translated to $.parent.find(child).show();
causing it to be slower.
.find()
2) $parent.find(.child).show();
Immediate children
3) $parent.children(.child).show();
Created context
6) $(.child, $(#parent)).show();
getElementsByName, getElementsByTagName to
search inside the passed context under the hood.
PERFORMANCE TIP
Quick note:
At a lower-level, this.getAttribute(id) is
equivalent to $(this).attr(id);
PERFORMANCE TIP
So remember..
PERFORMANCE TIP
CHAINING
var parents =$(.parents).doSomething().doSomethingElse();
PERFORMANCE TIP
EVENT DELEGATION
The idea that you allow events to bubble
up the DOM tree to a parent element.
.bind()
Allows you to attach a handler to an event
.live()
Simplest form of supported event delegation
Allows you to attach a handler to an event for
current and future matches of a selector
.delegate()
Allows you to specify the particular DOM
PERFORMANCE TIP
Minimise use by building HTML strings inmemory and using a single .append()
instead.
.detach() example
$(p).click(function(){
$(this).toggleClass(off);
});
var p;
$(button).click(function(){
if ( p ) {
/*..additional modification*/
p.appendTo(body);
p = null;
} else {
p = $(p).detach();
}
});
Notes
jsperf.com/to-detach-or-not-to-detach
jsperf.com/jquery-data-vs-jqueryselectiondata/11
PERFORMANCE TIP
UNDERSTAND LOOPS
Did you know that native for and while loops are
faster than using $.each() and $.fn.each()?
That said..
PERFORMANCE TIP
10
$.text vs $.fn.text
http://jsperf.com/jquery-text-vs-html/5
Notes:
http://james.padolsey.com/javascript/76-bytes-for-faster-jquery/
Bonus Tip
Non-DRY code
$('.someCheckbox').click(function(){
if ( this.checked ){
$('#input_carModel').val(defaultSettings.carModel);
$('#input_carYear').val(defaultSettings.carYear);
$('#input_carMiles').val(defaultSettings.carMiles);
$('#input_carTint').val(defaultSettings.carTint);
} else {
$('#input_carModel').val('');
$('#input_carYear').val('');
$('#input_carMiles').val('');
$('#input_carTint').val('');
}
});
DRY code
var props = ['carModel', 'carYear', 'carMiles', 'carTint'];
$('.someCheckbox').click(function(){
var checked = this.checked;
/*
What are we repeating?
1. input_ precedes each field name
2. accessing the same array for settings
3. repeating value resets
THANKS.
THATS IT!
GO BUILD AWESOME THINGS.