jQuery best practices for performance

jQuery best practices for performance

Described how to use jQuery for best performance, including examples.

Dd67c307bc2631f76773da4109e1d114?s=128

Sameera Thilakasiri

March 22, 2013
Tweet

Transcript

  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 2 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 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. 4 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. 5 by Sameera Thilakasiri | www.sameerast.com | Twitter @ sameerast
  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 6 by Sameera Thilakasiri | www.sameerast.com | Twitter @ sameerast
  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 7 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. 8 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 9 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 10 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 11 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 12 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. 13 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); }); 14 by Sameera Thilakasiri | www.sameerast.com | Twitter @ sameerast
  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. 15 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 collection You can then do anything with the cached collection. Caching will decrease repeat selections. 16 by Sameera Thilakasiri | www.sameerast.com | Twitter @ sameerast
  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! 17 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’); 18 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. 19 by Sameera Thilakasiri | www.sameerast.com | Twitter @ sameerast
  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. 20 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. 21 by Sameera Thilakasiri | www.sameerast.com | Twitter @ sameerast
  22. Thank you 22 by Sameera Thilakasiri | www.sameerast.com | Twitter

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