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