jQuery Anti-Patterns for Performance & Compression

jQuery Anti-Patterns for
Performance &
Compression
Paul Irish
NC JavaScript Camp ’10

Me.
Interaction Designer at Molecular, Inc.
jQuery Team Member - Dev. Relations

@paul_irish
http://paulirish.com Front-end development blog
http://aurgasm.us Eclectic music blog

wassup shawty? how u doin’
Taskspeed Test Lines of Code
200

150

100

50

0
YUI Dojo 1.3.1 Dojo 1.2.3 Qooxdoo MooTools Prototype.js jQuery PureDOM

Oft cited best practices
Cache length during loops
Cache your selections
Leverage documentFragment
Append new content outside the loop

// appending inside. bad.
$.each(reallyLongArray, function(count, item) {
var newLI = '<li>' + item + '</li>';
$('#ballers').append(newLI);
});
// documentFragment off-DOM
var frag = document.createDocumentFragment();
frag.appendChild(newLI[0]);
});
$('#ballers')[0].appendChild(frag);

$('#ballers').append(newLI);

});

// documentFragment off-DOM
var frag = document.createDocumentFragment();
frag.appendChild(newLI[0]);
});
$('#ballers')[0].appendChild(frag);

// string concatenate and set innerHTML
var myhtml = '';
myhtml += '<li>' + item + '</li>';
});
$('#ballers').html(myhtml);

Keep things DRY

If you’re repeating
yourself, you’re doing it
wrong

Moar DRY plz?

if ($ventfade.data('currently') != 'showing') {
$ventfade.stop();
}
if ($venthover.data('currently') != 'showing') {
$venthover.stop();
}
if ($spans.data('currently') != 'showing') {
$spans.stop();
}

from http://mt-ventures.com/_js/global.js

All clean! Thx

var elems = [$ventfade,$venthover,$spans];

$.each(elems,function(k,v){
if (v.data('currently') != 'showing'){
v.stop();
}
})

Architecture Anti-Patterns
Anonymous functions bound everywhere suck
$(document).ready(function(){
...
$('#magic').click(function(e){

$('#yayeffects').slideUp(function(){
...
});
});

$('#happiness').load(url+' #unicorns',function(){
...
})
});

Architecture - Object Literal
var PI = {
onReady : function(){
...
$('#magic').click(PI.candyMtn);
$('#happiness').load(url+' #unicorns',PI.unicornCb);
},
candyMtn : function(e){
$('#yayeffects').slideUp(PI.slideCb);
},
slideCb : function(){
...
},
unicornCb : function(){
...
}
}

$(document).ready(PI.onReady);

Architecture - Object Literal
Advantages:
Easier to navigate and discuss
Proﬁlers give you actual names to work with
You can execute these from ﬁrebug console
You can write unit tests against them

Anti-Pattern: The requery
// create and append your element
$(document.body).append("<div class='baaron'/>");
// requery to bind stuff
$("div.baaron").click(function(){});

// better:
// swap to appendTo to hold your elem
$("<div class='baaron'/>")
.appendTo(document.body)
.click(function(){});

This is not the .context property

// find all stylesheets in the body
var bodySheets = $('style',document.body);
bodySheets.context // ==> BODY element

Ignore that for the moment, I know no one that’s
found a use

$(‘#whats .the’,context)
Never pass it a selector string. Ever.
No performance gain vs $(root).ﬁnd(selector)

var arms = $('div.robotarm', '#container');
// instead do:
var arms = $('#container').find('div.robotarm');

$(‘#whats .the’,context)
You typically pass it this, but it’s purely a
convenience to avoid ﬁnd()

$('form.comments',this).submit(captureSubmit);
// exact same as
$(this).find('form.comments').submit(captureSubmit);

Which is more readable?

$('.reply_form', $(this).closest('.comment')).hide();

$(this).closest('.comment').find('.reply_form').hide();

Come on, my selector
Selector engines have come a long, long way.

Come on, my selector
Engines work in different ways
Top-down, bottom-up, function creation, other crazy shit

// from NWMatcher:

// selecting '.outmost #outer span'

T=e.nodeName;if(T=="SPAN"||T=="span")
{while((e=e.parentNode)&&e.nodeType==1)
{if((n=e.getAttributeNode("id"))&&n.value=="outer")
{if((e=e.parentNode)&&e.nodeType==1)
{C=e.className;if(C&&(" "+C+" ").indexOf(" outmost ")>-1)
{r[X++]=N;continue main;}}}}}

Selector engines, parse direction
Left to right (Top-down) Right to left (Bottom-up)

Mootools Sizzle

Sly YUI 3

Peppy NWMatcher

Dojo Acme

Ext JS

Prototype.js
details: http://alexsexton.com/selectors/

div.data table.attendees .gonzalez


Mootools Sizzle

Sly YUI 3

Peppy NWMatcher

Dojo Acme

Ext JS

Prototype.js


Mootools Sizzle

Sly YUI 3

Peppy NWMatcher

Dojo Acme querySelectorAll (qSA)

Ext JS

Prototype.js

Selector Optimization
Speciﬁc on the right, light on the left

// let's find scott
div.data .gonzalez

// specific on right, light on the left
.data td.gonzalez

tag.class if possible on your right-most selector.
just tag or just .class on left.

Of course, descending from an #id is best

// basic #id-based selector
var arms = $('#container div.robotarm');

// hyper-optimized #id case first, then find:
var arms = $('#container').find('div.robotarm');

Don’t be needlessly specific

// let's find scott
.data table.attendees td.gonzalez

// better: drop the middle
.data td.gonzalez

A flatter DOM helps, so move to HTML5
Also a wider range of tags speeds up filters

Avoid the universal selector
Avoid the implied universal selector

$('.buttons > *') // terribly costly
$('.buttons').children() // much better

$('.gender :radio') // implied universal
$('.gender *:radio') // exact same, explicit now
$('.gender input:radio') // much better

Google PageSpeed’s efficient selectors analysis
MDC: Writing Efficient CSS
https://developer.mozilla.org/en/Writing_Efficient_CSS

Benchmark.js
http://code.paulirish.com/sandbox/benchmark.js

Event Delegation
function delegate(type, delegate, handler) {
return $(document).bind(type, function(event) {
var target = $(event.target);
if (target.is(delegate)) {
return handler.apply(target, arguments);
}
});
}

delegate('click','td.jehl',createRockstar);

// and with live():
$('td.jehl').live('click',createRockstar);

Event Delegation
live() isn’t just for dynamic content
Speeds up page load
Only one event handler is bound vs many
Good for >3 elements all getting the same handler

// using live(), skipping selection on load
var jqElem = $(document);
jqElem.selector = 'li.ui';
jqElem.live('dblclick', dblhandler);

Event Delegation
delegate() bakes in huge performance gains
explicit context reduces overhead by ~80%
Use it instead of live() if possible

// awkward but equivalent
$('a.trigger',$('#container')[0]).live('click',handlerFn)

// so damn fine
$('#container').delegate('click','a.trigger',handlerFn)

Event Delegation new
in
1.4
.2!
delegate() bakes in huge performance gains
explicit context reduces overhead by ~80%
Use it instead of live() if possible

// awkward but equivalent
$('a.trigger',$('#container')[0]).live('click',handlerFn)

// so damn fine
$('#container').delegate('click','a.trigger',handlerFn)

The DOM is slow
Pull elements off the DOM while you toy with them

var table = $('#some-table');
var parent = table.parent();

table.detach();
table.addLotsAndLotsOfRows();
parent.append(table);

The DOM is slow
Pull elements off the DOM while you toy with them

var table = $('#some-table');
var parent = table.parent();
new
table.detach();
in 1
.4
table.addLotsAndLotsOfRows();
parent.append(table);

Minimize DOM touches
Use classes, but if a style change user-selected:

jQuery('a.swedberg').css('color', '#BADA55');

jQuery('<style type="text/css"> a.swedberg { color: BADA55; } </style>')
.appendTo('head');

Timings for X elements
3000
2250 (1000 iterations)

1500 css()
style tag
750
0
1 5 10 20 50

Don’t treat jQuery as a Black Box
Use the source as your documentation
Add this to your bookmark bar, NOW!
http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js
http://bit.ly/jqsource
Determine which are convenience methods:
getScript: function( url, callback ) {
return jQuery.get(url, null, callback, "script");
},
getJSON: function( url, data, callback ) {
return jQuery.get(url, data, callback, "json");
},

Don’t treat jQuery as a Black Box
Learn the lesser-known methods
map(), slice(), stop(), (de)queue(),
prevAll(), pushStack(), inArray() , etc

// index() in jQuery <= 1.3.2
$('#rdworth').parent().children().index( $('#rdworth')[0] )

// using prevAll() is 10% faster (also sexier)
$('#rdworth').prevAll().length

// in jQuery 1.4
$('#rdworth').index()

Don’t act on absent elements
jQuery is very kind and doesn’t throw errors at you
Don’t assume it’s just ﬁne to do

$('#doesntexist').slideUp()
// this will execute genFx(), speed() and animate()
// before it hits an each()

jQuery UI widgets have a lot of overhead you’ll hit


jQuery.fn.doOnce = function(func){
this.length && func.apply(this);
return this;
}

$('li.cartitems').doOnce(function(){
// make it ajax! o/
});


$.fn.plugin = function(opts){
if(!this.length) return this;
var opts = $.extend(......
...
return this.each(...

Setter Methods

view-source:setters.js

new
New Element Creation 1.4
!
in

jQuery("<div/>", {
id: "foo",
rel : "something"
css: {
height: "50px",
width: "50px",
color: "blue",
backgroundColor: "#ccc"
},
click: function() {
$(this).css("backgroundColor", "red");
}
}).appendTo("body");

new
eq(), ﬁrst(), last() 1.4
!
in

var lastelem = $elems.eq(-1); // get() too!

$('#nav li:first') === $('#nav li').first()

$('#nav li:last') === $('#nav li').last()

Data()

// regular:
$(elem).data(key,value);

// omg like 10x faster:
$.data(elem,key,value);

Compression
YUI Compressor
Sits on Rhino.
Comments, whitespace, variable replacement

//it already does these micro-optimizations:
object['prop'] ==> object.prop
{'key':123} ==> {key:123}
'jon's apostophes' ==> "jon's apostrophes"
'bigass ' + 'string' ==> 'bigass string'

Variable deﬁnition

// old 'n busted // new hotness
var test1 = 1; var test1 = 1,
var test2 = function() { test2 = function() {
// function code // function code
}; },
var test3 = test2(test1); test3 = test2(test1);

Munge the primitives
Deﬁne shortcuts at the top of your scope
Good for both compression and scope chain traversal

var TRUE = true,
FALSE = false,
NULL = null,
window = self,
undefined = undefined;

Deﬁne shortcuts at the top of your scope
Good for both compression and scope chain traversal

var TRUE = true,
FALSE = false,
NULL = null,
window = self,
undefined;
undefined = undefined;


(function(){
var window = this, document = document,
undefined;
/* code */
})();

(function(window, document, undefined){
/* code */
})(this,this.document);

var str=‘Let’s put this into action’

// html.no-js html>
<!doctype ==> html.js
var elem = document.getElementsByTagName('html')[0];
elem.className = elem.className.replace('no-js','js');
<html class="no-js">
// quicker reference, safer replace
<head>
var elem = document.documentElement;
elem.className = elem.className.replace(/bno-jsb/,'js');
<script>
// one// change the html class to 'js'
line ftw!
// in the head, no FOUC
document.documentElement.className =
document.documentElement.className.replace(/bno-jsb/,
</script>
'js');
</body>
// shorter with a self-executing anonymous function
(function(B){B.className=B.className.replace(/bno-jsb/,


// html.no-js ==> html.js


// one line ftw!
'js');


// html.no-js ==> html.js



// one line ftw!
'js');

'js')})(document.documentElement);

// pass className, object string notation
(function(H,C){H[C]=H[C].replace(/bno-jsb/,'js')})
(document.documentElement,'className')

Conditionals

// old 'n busted
if ( type === 'foo' || type === 'bar' ) {}

// regex test
if ( /^(foo|bar)$/.test(type) ) {}

// obj literal lookup (smaller if <5 items)
if ( ({foo:1,bar:1})[type] ) {}

Logic and Ternary operands
// basic function detection
document.querySelectorAll && document.querySelectorAll('a:nth-child(2)')

// assignment is legal, but it evaluates to the right expression
callback && (isCallbackCalled = true) && callback(returnVal);

// call or cache the callback function
(isCallbackCalled || returnVal) ? fn(returnVal) : (callback = fn);

// inline function calls
isToday('Saturday') && Math.round(Math.random()) && $('#winnar').show()

// if JSON2.js or Native JSON is present, otherwise eval.
data = window.JSON && JSON.parse(data) || eval('('+data +')');

Write maintainable code
As a developer,

you should work ﬁrst and foremost
for the user of your products.
The second most important person to work for is
the developer that takes over from you.
- Christian Heilmann

Comments
/*!
* Will not be removed by YUI Compressor
*/

// for quick toggling on and off:
/* */
aaaahYeah();
/* */

/* * /
ohHellNo();
/* */

Compression Tools
CompressorRater
http://compressorrater.thruhere.net/
YUI Compressor front-end
http://refresh-sf.com/yui/

Thanks, ya’ll.
Slides at http://paulirish.com/perf

@paul_irish

thx:
Alex Sexton, Ben Alman, Adam Sontag,
James Padolsey, temp01, #jquery on Freenode

todo
shadow effect to code samples
more context research and this: http://
groups.google.com/group/jquery-dev/msg/
b4b7935a4013dfe7 and http://ispeakwebstuff.co.uk/
web-design-development-tutorials/clever-jquery-
selectors/

`
// pngfix for IE6
// e.g. FL.pngfix('img.bigProdShot,a.thumb');
pngfix : function(sel){
// conditional comments for inclusion of that js.
if (typeof DD_belatedPNG == 'undefined'){ return;
} else {
// delay pngfix until window onload
$(window).load(function(){ $(sel).each(function()
{ DD_belatedPNG.fixPng(arguments[1]); }); });
}
} // end of FL.pngfix()

jQuery Anti-Patterns for Performance & Compression

Recommended

More Related Content

Viewers also liked (18)

Similar to jQuery Anti-Patterns for Performance & Compression (20)

More from Paul Irish (8)

Recently uploaded (20)

jQuery Anti-Patterns for Performance & Compression

Editor's Notes