5 Quick JavaScript Performance Improvement Tips
2 likes•4,084 views
The document provides five key tips for improving JavaScript performance, emphasizing the significance of load times for consumer satisfaction and conversion rates. The tips include minimizing file usage, utilizing local variables, reducing work in loops, monitoring plugins, and avoiding DOM access. Additional resources and recommended readings for further optimization strategies are also included.
5 Quick JavaScript Performance Improvement Tips
- 1. 5 Quick JavaScript Performance Improvement Tips 30 January 2014
- 3. The Rock n Coder • http://therockncoder.blogspot.com • http://www.youtube.com/user/rockncoder • https://github.com/Rockncoder • http://www.slideshare.net/rockncoder
- 4. Our Agenda • Why Performance Matters • 5 Performance Tips • Resources • Summary
- 6. Why Performance Matters? • 47% of consumers expect a 2 second page load • 40% abandon a page that takes 3 seconds or more to load • A 1 second delay in page response can result in a 7% reduction in conversions
- 7. If an e-commerce site is making $100,000 a day in sales, a 1 second page delay could potentially cost you $2.5 million in lost sales every year
- 8. We should forget about small efficiencies, say about 97% of the time: premature optimization is the root of all evil.Yet we should not pass up our opportunities in that critical 3%. D. Knuth
- 10. Tip #5 Use as few files as possible
- 11. Use as few files as possible • Browser can load multiple files at a time • But only one JS file at a time • Concatenate multiple JS file into one • Compress JS files • Prefer JS at the bottom of the HTML file
- 12. Tip #4 Prefer local variables
- 13. Prefer local variables • Variables in scope found quicker • JS search local scope, then global • with creates a new scope level ahead of local • closures also create new scope level
- 14. Var Scoping Demo
- 15. Prefer local variables • Property chains similar to var scoping • Objects closer in the chain found quicker
- 17. Tip #3 Reduce the work done in loops
- 18. Reduce the work done in loops • No real speed difference between: for, while and do_while • Avoid for_in • (Watch library based for_each)
- 19. Tip #2 Watch your plugins
- 20. Watch your plugins • Know what your plugins do • Be sure to evaluate different plugins • Example jQuery.js or Zepto.js
- 21. jQuery Demo
- 22. Tip #1 Avoid the DOM
- 23. Avoid the DOM • The DOM is REALLY Slow • Avoid accessing it when possible • Do work offline then update DOM
- 24. DOM Access Demo
- 25. Resources
- 26. Resources • Microsoft Ajax Minifier http://ajaxmin.codeplex.com/ • Google Closure Tools https://developers.google.com/closure/ • Yahoo YSlow http://developer.yahoo.com/yslow/
- 27. Books • High Performance JavaScript Nicholas C. Zakas • JavaScript Ninja John Resig & Bear Bibeaults • JavaScript: The Good Parts Douglas Crockford
- 28. Summary
- 29. Summary • Avoid the DOM • Watch your plugins • Reduce the work done in loops • Prefer local variables • Use as few files as possible
- 30. The Rock n Coder • http://therockncoder.blogspot.com • http://www.youtube.com/user/rockncoder • https://github.com/Rockncoder • http://www.slideshare.net/rockncoder