Post on 10-May-2015
description
1
jQuery performance tipsWeb should be snappy, not sloppy
by Sameera Thilakasiri | www.sameerast.com | Twitter @ sameerast
2
Most popular sites using jQuery on
by Sameera Thilakasiri | www.sameerast.com | Twitter @ sameerast
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()).
by Sameera Thilakasiri | www.sameerast.com | Twitter @ sameerast
4
Slower: Class Selectors
$(‘.element’)
getElementsByClassName() not supported in IE5-8Supported in FF3+, Safari 4+, Chrome 4+, Opera 10.10+ so faster in these.
by Sameera Thilakasiri | www.sameerast.com | Twitter @ sameerast
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.
by Sameera Thilakasiri | www.sameerast.com | Twitter @ sameerast
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
by Sameera Thilakasiri | www.sameerast.com | Twitter @ sameerast
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
by Sameera Thilakasiri | www.sameerast.com | Twitter @ sameerast
8
find()
$parent.find(‘.child’).show();
This is the fastest of the entire set. I’ll explain why shortly.
by Sameera Thilakasiri | www.sameerast.com | Twitter @ sameerast
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
by Sameera Thilakasiri | www.sameerast.com | Twitter @ sameerast
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
by Sameera Thilakasiri | www.sameerast.com | Twitter @ sameerast
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
by Sameera Thilakasiri | www.sameerast.com | Twitter @ sameerast
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
by Sameera Thilakasiri | www.sameerast.com | Twitter @ sameerast
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.
by Sameera Thilakasiri | www.sameerast.com | Twitter @ sameerast
14
Why not use the DOM
element itself? This is faster:
$('a').bind(‘click’, function(){console.log('You clicked: ' +
this.id);});
by Sameera Thilakasiri | www.sameerast.com | Twitter @ sameerast
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.
by Sameera Thilakasiri | www.sameerast.com | Twitter @ sameerast
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.
by Sameera Thilakasiri | www.sameerast.com | Twitter @ sameerast
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!
by Sameera Thilakasiri | www.sameerast.com | Twitter @ sameerast
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’);
by Sameera Thilakasiri | www.sameerast.com | Twitter @ sameerast
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.
by Sameera Thilakasiri | www.sameerast.com | Twitter @ sameerast
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.
by Sameera Thilakasiri | www.sameerast.com | Twitter @ sameerast
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.
by Sameera Thilakasiri | www.sameerast.com | Twitter @ sameerast
22
Thank you
by Sameera Thilakasiri | www.sameerast.com | Twitter @ sameerast
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
by Sameera Thilakasiri | www.sameerast.com | Twitter @ sameerast