jQuery best practices for performance

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

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