jQuery performance best practices by Sameera Thilakasiri

jQuery performance tips
Web should be snappy, not sloppy

by Sameera Thilakasiri | www.sameerast.com | Twitter @ sameerast 1

Most popular sites using jQuery on

Picture from internet


Fast: ID & Element Selectors
$(‘#Element, form, input’)

ID and element selectors are the fastest
This is because they’re backed by native DOM
operations (eg. getElementById()).


Slower: Class Selectors
$(‘.element’)

getElementsByClassName() not supported in IE5-8
Supported in FF3+, Safari 4+, Chrome 4+, Opera 10.10+
so faster in these.


Slowest: Pseudo & Attribute Selectors
$(‘:visible, :hidden’);
$(‘[attribute=value]’);

This is due to no native calls available that we can take
advantage of.
querySelector() and querySelectorAll() help with this in
modern browsers.


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
$(‘.child’, $parent).show();

Here the scope must be parsed and
translated to $.parent.find(‘child’).show();
causing it to be slower.

~5-10% slower than the fastest option


find()
$parent.find(‘.child’).show();

This is the fastest of the entire set. I’ll explain why
shortly.


Immediate children
$parent.children(‘.child’).show();

Internally uses $.sibling and JavaScript’s nextSibling() to
find nodes following other nodes in the same tree.

~50% slower than the fastest option


CSS child combinatory selector

$(‘#parent > .child’).show();

Uses a child combinatory selector, however Sizzle works
from right to left.
Bad as it will match .child before checking it’s a direct
child of the parent.


CSS class selector
$(‘#parent .child’).show();

Uses a class selector and is constrained by the same
rules as 4).
Internally also has to translate to using .find()


Created context
$(‘.child’, $(‘#parent’)).show();

Equivalent internally to
$(‘#parent’).find(‘.child’), however note that parent is a
jQuery object.


The fastest option is..
$parent.find(‘.child’).show();

The parent selector is already cached here, so it doesn’t
need to be refetched from the DOM.
Without caching this is ~ 16% slower.
Directly uses native
getElementById, getElementsByName, getElementsByT
agName to search inside the passed context under the
hood.


Why not use the DOM
element itself? This is faster:

$('a').bind(‘click’, function(){
console.log('You clicked: ' + this.id);
});


Caching is the best practice
var parents = $(‘.parents’), //caching
children = $(‘.parents’).find(‘.child’), //bad
kids = parents.find(‘.child’); //good

Caching just means we’re storing the result of a
selection for later re-use.


So remember..
Each $(‘.elem’) will re-run your search of the DOM and
return a new collection
You can then do anything with the cached collection.
Caching will decrease repeat selections.


Chaining
var parents = $(‘.parents’).doSomething().doSomethingElse();

Almost all jQuery methods return a jQuery object and
support chaining.
This means after executing a method on a
selection, you can continue executing more.
Less code and it’s easier to write!


No-chaining vs. chaining
//Without chaining
$(‘#notification’).fadeIn(‘slow’);
$(‘#notification’).addClass(‘.activeNotification’);
$(‘#notification’).css(‘marginLeft’, ‘50px’);
//With chaining
$(‘#notification’).fadeIn(‘slow’)
.addClass(‘.activeNotification’)
.css(‘marginLeft’, ‘50px’);


Better .append() usage
Minimise use by building HTML strings in memory and
using a single .append() instead.
Multiple appends can be up to 90% slower when not
appending to cached selectors and up to 20% slower
with them.


Use .detach()
Works great when you’re doing heavy interaction with
a node
Allows you to re-insert the node to the DOM once
you’re ready
Up to 60% faster than working with undetached nodes.


Better .data() usage
We usually attach data like this..
But this is actually much faster..
$(‘#elem’).data( key , value );
$.data(‘#elem’, key , value);

as there’s overhead creating a jQuery object and doing
data-parsing in the first.


Thank you


Author
Sameera Thilakasiri is a front-end developer based in Colombo. Specialist in
UI, UX, SEO, IA, IxD, RWD. He is blogging technical areas and lifestyle
photographer while is leisure. He can be reached by
http://www.sameerast.com or @sameerast


jQuery performance best practices by Sameera Thilakasiri

Recomendados

Recomendados

Mais conteúdo relacionado

Destaque

Destaque (6)

Semelhante a jQuery performance best practices by Sameera Thilakasiri

Semelhante a jQuery performance best practices by Sameera Thilakasiri (20)

Último

Último (20)

jQuery performance best practices by Sameera Thilakasiri