5 quick javascript performance improvement tips

Download 5 Quick JavaScript Performance Improvement Tips

Post on 08-May-2015

3.275 views

Category:

Technology

0 download

Embed Size (px)

DESCRIPTION

JavaScript is arguably the most important language in the world. It comes included in nearly every desktop and mobile browser. It powers the client-side of apps like Facebook and GMail. It is the language of choice for mobile development environments like Apccelerator's Titanium and Apache's Cordova (aka Adobe's PhoneGap). It is even on the server now in Node.js. Yet when programmer's run into performance issue with JavaScript their first inclination is to blame its interpreted nature, not realizing that simple changes in the structure of their code can result in sometimes significant improvements in performance. In this session I will show five quick changes you can make to your JavaScript code to improve its performance and explain why they work.

TRANSCRIPT

  • 1.5 Quick JavaScript Performance Improvement Tips 30 January 2014

2. Twitter handle: @therockncoder 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 5. Why Performance Matters? 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 canresult 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 shouldforget aboutsmall efciencies, say about 97% of the time: premature optimization isthe root of all evil.Yet we should not pass up our opportunities in that critical 3%. D. Knuth 9. 5 Performance Tips 10. Tip #5 Use as few les as possible 11. Use as few les as possible Browser can load multiple les at a time But only one JS le at a time Concatenate multiple JS le into one Compress JS les Prefer JS at the bottom of the HTML le 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 16. Property Chain Demo 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 ofine then update DOM 24. DOM Access Demo 25. Resources 26. Resources Microsoft Ajax Minierhttp://ajaxmin.codeplex.com/ Google Closure Toolshttps://developers.google.com/closure/ Yahoo YSlowhttp://developer.yahoo.com/yslow/ 27. Books High Performance JavaScript Nicholas C. Zakas JavaScript NinjaJohn 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 les 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

Recommended

View more >