Described how jquery should be used for best performance with examples.

1. jQuery performance tips
Web should be snappy, not sloppy
by Sameera Thilakasiri | www.sameerast.com | Twitter @ sameerast 1

2. Most popular sites using jQuery on
Picture from internet
by Sameera Thilakasiri | www.sameerast.com | Twitter @ sameerast 2

3. 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()).
by Sameera Thilakasiri | www.sameerast.com | Twitter @ sameerast 3

4. Slower: Class Selectors
$(‘.element’)
getElementsByClassName() not supported in IE5-8
Supported in FF3+, Safari 4+, Chrome 4+, Opera 10.10+
so faster in these.
by Sameera Thilakasiri | www.sameerast.com | Twitter @ sameerast 4

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 5

6. 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
by Sameera Thilakasiri | www.sameerast.com | Twitter @ sameerast 6

7. 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
by Sameera Thilakasiri | www.sameerast.com | Twitter @ sameerast 7

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 8

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 9

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 10

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 11

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 12

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, getElementsByT
agName to search inside the passed context under the
hood.
by Sameera Thilakasiri | www.sameerast.com | Twitter @ sameerast 13

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 14

15. 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.
by Sameera Thilakasiri | www.sameerast.com | Twitter @ sameerast 15

16. 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.
by Sameera Thilakasiri | www.sameerast.com | Twitter @ sameerast 16

17. 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!
by Sameera Thilakasiri | www.sameerast.com | Twitter @ sameerast 17

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 18

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 19

20. 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.
by Sameera Thilakasiri | www.sameerast.com | Twitter @ sameerast 20

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 21

22. Thank you
by Sameera Thilakasiri | www.sameerast.com | Twitter @ sameerast 22

23. 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
by Sameera Thilakasiri | www.sameerast.com | Twitter @ sameerast 23