jQuery Performance Tips

Tips to improve performance jQuery

Transcript

1. JQuery Performance Tips
2. Javascript & jQuery Javascript: an object-oriented computer programming language commonly used to create interactive effects within web browsers. jQuery: jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers
3. Example: JSON
4. Why Does Performance Matter? Bad code = browsers can end up having to do more work = more memory use = slower apps
5. Why Does Performance Matter? (2) https://blog.kissmetrics.com/loading-time/
6. #1: Stay Up To Date http://jsperf.com/speed-comparison-of-jquery-versions/61
7. #2: Caching Cache Selector ~> Storing the result of selection for later use. var my_div = $(“#my-div”); ~> Each $(‘...’) always re-run searching ~> Caching will decrease repeat selections
8. #2: Caching (2) Cached Selector vs non-cached Selector http://jsperf.com/caching-jquery-selectors
9. #2: Caching (3) Cache length ~> Storing the result of length. Preventing to access length property of an array every time
10. #3: Use ID http://jsperf.com/id-vs-class-vs-tag-selectors/2
11. #3: ID, Element, & Class • $(“#my-div”) -> document.getElementsById(“my-div”); • $(“div”) -> document.getElementsByTagName(“div”); • $(“.my-class”) -> document.getElementsByClassName (“.my-class”);
12. #3: getElementById -> Fastest Function http://jsperf.com/getelementbyid-vs-getelementsbytagname/5
13. #4: Use .find() var list = document.getElementById('my-id'); http://jsperf.com/jquery-selectors-context/2
14. #4: Use .find() (2) ~> $(list).find('.test'); // -> fastest $('.test', list); ~> translate to $(list).find('.test');
15. #4: Use .find() (3) $('#list').find('.test') ~> parent is jQuery object ~> slower than using document. getElementByID $('.test', $('#list')) ~> translate to $('#list').find('.test')
16. #4: use .find() (4) $('#list .test'); ~> jQuery parser works from right to left ~> search .test first before #list ~> internally use .find()
17. #4: use .find() (5) $('#list > .test') ~> search .test first before checking direct child. $(list).children('.test') ~> internaly use $.sibling and Javascript nextSibling()
18. #5: Use Fewer Selectors http://jsperf.com/specific-jquery-selector/2 ~> Use tag.class if possible on your right-most selector, and just id, tag or just .class on the left.
19. #6: Chaining http://jsperf.com/jquery-chaining/2
20. Thank You!
21. jQuery, jsperf.com, Addy Osmani, Paul Irish, Scott Kosman, Kissmetric Credit