jQuery performance best practices by Sameera Thilakasiri

1

jQuery performance tipsWeb should be snappy, not sloppy

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

2

Most popular sites using jQuery on


Picture from internet

3

Fast: ID & Element Selectors

$(‘#Element, form, input’)

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


4

Slower: Class Selectors

$(‘.element’)

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


5

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.


6

Understand parents and children

1) $(‘.child", $parent).show(); //context2) $parent.find(‘.child’).show(); //find()3) $parent.children(".child’).show(); //immediate children4) $(‘#parent > .child’).show(); //child combinator selector5) $(‘#parent .child’).show(); //class selector6) $('.child', $('#parent')).show(); //created context


7

Context

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

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

~5-10% slower than the fastest option


8

find()

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

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


9

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


10

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.~70% slower than the fastest option


11

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()~77% slower than the fastest option


12

Created context

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

Equivalent internally to $(‘#parent’).find(‘.child’), however note that parent is a jQuery object.~23% slower than the fastest option


13

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, getElementsByTagName to search inside the passed context under the hood.


14

Why not use the DOM

element itself? This is faster:

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

this.id);});


15

Caching is the best practicevar parents = $(‘.parents’), //caching

children = $(‘.parents’).find(‘.child’), //badkids = parents.find(‘.child’); //good

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


16

So remember..

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


17

Chainingvar 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!


18

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’);


19

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.


20

Use .detach()

Works great when you’re doing heavy interaction with a nodeAllows you to re-insert the node to the DOM once you’re readyUp to 60% faster than working with undetached nodes.


21

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.


22

Thank you


23

AuthorSameera 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


https://plus.google.com/111681059766080908127?rel=author

http://www.sameerast.com/

http://www.sameerast.com/

Technology

jQuery performance best practices by Sameera Thilakasiri