• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
jQuery performance best practices by Sameera Thilakasiri
 

jQuery performance best practices by Sameera Thilakasiri

on

  • 418 views

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

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

Statistics

Views

Total Views
418
Views on SlideShare
417
Embed Views
1

Actions

Likes
0
Downloads
8
Comments
0

1 Embed 1

https://twitter.com 1

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    jQuery performance best practices by Sameera Thilakasiri jQuery performance best practices by Sameera Thilakasiri Presentation Transcript

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