0
jQuery performance tips  Web should be snappy, not sloppy               by Sameera Thilakasiri | www.sameerast.com | Twitt...
Most popular sites using jQuery on                                                                  Picture from internet ...
Fast: ID & Element Selectors$(‘#Element, form, input’)ID and element selectors are the fastestThis is because they’re back...
Slower: Class Selectors$(‘.element’)getElementsByClassName() not supported in IE5-8Supported in FF3+, Safari 4+, Chrome 4+...
Slowest: Pseudo & Attribute Selectors$(‘:visible, :hidden’);$(‘[attribute=value]’);This is due to no native calls availabl...
Understand parents and children1) $(‘.child", $parent).show(); //context2) $parent.find(‘.child’).show(); //find()3) $pare...
Context$(‘.child’, $parent).show();Here the scope must be parsed andtranslated to $.parent.find(‘child’).show();causing it...
find()$parent.find(‘.child’).show();This is the fastest of the entire set. I’ll explain whyshortly.                       ...
Immediate children$parent.children(‘.child’).show();Internally uses $.sibling and JavaScript’s nextSibling() tofind nodes ...
CSS child combinatory selector$(‘#parent > .child’).show();Uses a child combinatory selector, however Sizzle worksfrom rig...
CSS class selector$(‘#parent .child’).show();Uses a class selector and is constrained by the samerules as 4).Internally al...
Created context$(‘.child’, $(‘#parent’)).show();Equivalent internally to$(‘#parent’).find(‘.child’), however note that par...
The fastest option is..$parent.find(‘.child’).show();The parent selector is already cached here, so it doesn’tneed to be r...
Why not use the DOMelement itself? This is faster:$(a).bind(‘click’, function(){     console.log(You clicked:  + this.id);...
Caching is the best practicevar   parents = $(‘.parents’), //caching      children = $(‘.parents’).find(‘.child’), //bad  ...
So remember..Each $(‘.elem’) will re-run your search of the DOM andreturn a new collectionYou can then do anything with th...
Chainingvar parents = $(‘.parents’).doSomething().doSomethingElse();Almost all jQuery methods return a jQuery object andsu...
No-chaining vs. chaining//Without chaining$(‘#notification’).fadeIn(‘slow’);$(‘#notification’).addClass(‘.activeNotificati...
Better .append() usageMinimise use by building HTML strings in memory andusing a single .append() instead.Multiple appends...
Use .detach()Works great when you’re doing heavy interaction witha nodeAllows you to re-insert the node to the DOM onceyou...
Better .data() usageWe usually attach data like this..But this is actually much faster..$(‘#elem’).data( key , value );$.d...
Thank youby Sameera Thilakasiri | www.sameerast.com | Twitter @ sameerast   22
AuthorSameera Thilakasiri is a front-end developer based in Colombo. Specialist inUI, UX, SEO, IA, IxD, RWD. He is bloggin...
Upcoming SlideShare
Loading in...5
×

jQuery performance best practices by Sameera Thilakasiri

385

Published on

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

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
385
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
16
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "jQuery performance best practices by Sameera Thilakasiri"

  1. 1. jQuery performance tips Web should be snappy, not sloppy by Sameera Thilakasiri | www.sameerast.com | Twitter @ sameerast 1
  2. 2. Most popular sites using jQuery on Picture from internet by Sameera Thilakasiri | www.sameerast.com | Twitter @ sameerast 2
  3. 3. Fast: ID & Element Selectors$(‘#Element, form, input’)ID and element selectors are the fastestThis is because they’re backed by native DOMoperations (eg. getElementById()). by Sameera Thilakasiri | www.sameerast.com | Twitter @ sameerast 3
  4. 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 4
  5. 5. Slowest: Pseudo & Attribute Selectors$(‘:visible, :hidden’);$(‘[attribute=value]’);This is due to no native calls available that we can takeadvantage of.querySelector() and querySelectorAll() help with this inmodern browsers. by Sameera Thilakasiri | www.sameerast.com | Twitter @ sameerast 5
  6. 6. Understand parents and children1) $(‘.child", $parent).show(); //context2) $parent.find(‘.child’).show(); //find()3) $parent.children(".child’).show(); //immediatechildren4) $(‘#parent > .child’).show(); //child combinatorselector5) $(‘#parent .child’).show(); //class selector6) $(.child, $(#parent)).show(); //created context by Sameera Thilakasiri | www.sameerast.com | Twitter @ sameerast 6
  7. 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 7
  8. 8. find()$parent.find(‘.child’).show();This is the fastest of the entire set. I’ll explain whyshortly. by Sameera Thilakasiri | www.sameerast.com | Twitter @ sameerast 8
  9. 9. Immediate children$parent.children(‘.child’).show();Internally uses $.sibling and JavaScript’s nextSibling() tofind nodes following other nodes in the same tree.~50% slower than the fastest option by Sameera Thilakasiri | www.sameerast.com | Twitter @ sameerast 9
  10. 10. CSS child combinatory selector$(‘#parent > .child’).show();Uses a child combinatory selector, however Sizzle worksfrom right to left.Bad as it will match .child before checking it’s a directchild of the parent.~70% slower than the fastest option by Sameera Thilakasiri | www.sameerast.com | Twitter @ sameerast 10
  11. 11. CSS class selector$(‘#parent .child’).show();Uses a class selector and is constrained by the samerules 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. 12. Created context$(‘.child’, $(‘#parent’)).show();Equivalent internally to$(‘#parent’).find(‘.child’), however note that parent is ajQuery object.~23% slower than the fastest option by Sameera Thilakasiri | www.sameerast.com | Twitter @ sameerast 12
  13. 13. The fastest option is..$parent.find(‘.child’).show();The parent selector is already cached here, so it doesn’tneed to be refetched from the DOM.Without caching this is ~ 16% slower.Directly uses nativegetElementById, getElementsByName, getElementsByTagName to search inside the passed context under thehood. by Sameera Thilakasiri | www.sameerast.com | Twitter @ sameerast 13
  14. 14. Why not use the DOMelement itself? This is faster:$(a).bind(‘click’, function(){ console.log(You clicked: + this.id);}); by Sameera Thilakasiri | www.sameerast.com | Twitter @ sameerast 14
  15. 15. Caching is the best practicevar parents = $(‘.parents’), //caching children = $(‘.parents’).find(‘.child’), //bad kids = parents.find(‘.child’); //goodCaching just means we’re storing the result of aselection for later re-use. by Sameera Thilakasiri | www.sameerast.com | Twitter @ sameerast 15
  16. 16. So remember..Each $(‘.elem’) will re-run your search of the DOM andreturn a new collectionYou can then do anything with the cached collection.Caching will decrease repeat selections. by Sameera Thilakasiri | www.sameerast.com | Twitter @ sameerast 16
  17. 17. Chainingvar parents = $(‘.parents’).doSomething().doSomethingElse();Almost all jQuery methods return a jQuery object andsupport chaining.This means after executing a method on aselection, you can continue executing more.Less code and it’s easier to write! by Sameera Thilakasiri | www.sameerast.com | Twitter @ sameerast 17
  18. 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. 19. Better .append() usageMinimise use by building HTML strings in memory andusing a single .append() instead.Multiple appends can be up to 90% slower when notappending to cached selectors and up to 20% slowerwith them. by Sameera Thilakasiri | www.sameerast.com | Twitter @ sameerast 19
  20. 20. Use .detach()Works great when you’re doing heavy interaction witha nodeAllows you to re-insert the node to the DOM onceyou’re readyUp to 60% faster than working with undetached nodes. by Sameera Thilakasiri | www.sameerast.com | Twitter @ sameerast 20
  21. 21. Better .data() usageWe 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 doingdata-parsing in the first. by Sameera Thilakasiri | www.sameerast.com | Twitter @ sameerast 21
  22. 22. Thank youby Sameera Thilakasiri | www.sameerast.com | Twitter @ sameerast 22
  23. 23. AuthorSameera Thilakasiri is a front-end developer based in Colombo. Specialist inUI, UX, SEO, IA, IxD, RWD. He is blogging technical areas and lifestylephotographer while is leisure. He can be reached byhttp://www.sameerast.com or @sameerast by Sameera Thilakasiri | www.sameerast.com | Twitter @ sameerast 23
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×