5 Quick JavaScript Performance
Improvement Tips30 January 2014
Twitter handle: @therockncoder
The Rock n Coder
• http://therockncoder.blogspot.com
• http://www.youtube.com/user/rockncoder
• https://github.com/Rockncoder
• http://www.slideshare.net/rockncoder
Our Agenda
• Why Performance Matters
• 5 Performance Tips
• Resources
• Summary
Why Performance Matters?
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
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
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
5 Performance Tips
Tip #5 Use as few files as
possible
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
Tip #4 Prefer local variables
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
Var Scoping Demo
Prefer local variables
• Property chains similar to var scoping
• Objects closer in the chain found quicker
Property Chain Demo
Tip #3 Reduce the work done
in loops
Reduce the work done in loops
• No real speed difference between: for, while and do_while
• Avoid for_in
• (Watch library based for_each)
Tip #2 Watch your plugins
Watch your plugins
• Know what your plugins do
• Be sure to evaluate different plugins
• Example jQuery.js or Zepto.js
jQuery Demo
Tip #1 Avoid the DOM
Avoid the DOM
• The DOM is REALLY Slow
• Avoid accessing it when possible
• Do work offline then update DOM
DOM Access Demo
Resources
Resources
• Microsoft Ajax Minifierhttp://ajaxmin.codeplex.com/
• Google Closure Toolshttps://developers.google.com/closure/
• Yahoo YSlow http://developer.yahoo.com/yslow/
Books
• High Performance JavaScriptNicholas C. Zakas
• JavaScript NinjaJohn Resig & Bear Bibeaults
• JavaScript: The Good PartsDouglas Crockford
Summary
Summary
• Avoid the DOM
• Watch your plugins
• Reduce the work done in loops
• Prefer local variables
• Use as few files as possible
The Rock n Coder
• http://therockncoder.blogspot.com
• http://www.youtube.com/user/rockncoder
• https://github.com/Rockncoder
• http://www.slideshare.net/rockncoder
