5 Quick JavaScript
Performance
Improvement Tips
30 January 2014
Twitter handle:
@therockncoder
The Rock n Coder
• http://therockncoder.blogspot.com	

• http://www.youtube.com/user/rockncoder	

• https://github.com/Roc...
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 mo...
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 ...
We should forget about small efficiencies, say
about 97% of the time: premature optimization
is the root of all evil.Yet we...
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 ...
Tip #4
Prefer local variables
Prefer local variables
• Variables in scope found quicker	

• JS search local scope, then global	

• with creates a new sc...
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 li...
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 Minifier


http://ajaxmin.codeplex.com/	


• Google Closure Tools


https://developers.google.co...
Books
• High Performance JavaScript

Nicholas C. Zakas	


• JavaScript Ninja


John Resig & Bear Bibeaults	


• JavaScript...
Summary
Summary
• Avoid the DOM 	

• Watch your plugins 	

• Reduce the work done in loops 	

• Prefer local variables	

• Use as ...
The Rock n Coder
• http://therockncoder.blogspot.com	

• http://www.youtube.com/user/rockncoder	

• https://github.com/Roc...
Upcoming SlideShare
Loading in...5
×

5 Quick JavaScript Performance Improvement Tips

3,550

Published on

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.

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
3,550
On Slideshare
0
From Embeds
0
Number of Embeds
26
Actions
Shares
0
Downloads
29
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

5 Quick JavaScript Performance Improvement Tips

  1. 1. 5 Quick JavaScript Performance Improvement Tips 30 January 2014
  2. 2. Twitter handle: @therockncoder
  3. 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. 4. Our Agenda • Why Performance Matters • 5 Performance Tips • Resources • Summary
  5. 5. Why Performance Matters?
  6. 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. 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. 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
  9. 9. 5 Performance Tips
  10. 10. Tip #5 Use as few files as possible
  11. 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. 12. Tip #4 Prefer local variables
  13. 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. 14. Var Scoping Demo
  15. 15. Prefer local variables • Property chains similar to var scoping • Objects closer in the chain found quicker
  16. 16. Property Chain Demo
  17. 17. Tip #3 Reduce the work done in loops
  18. 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. 19. Tip #2 Watch your plugins
  20. 20. Watch your plugins • Know what your plugins do • Be sure to evaluate different plugins • Example jQuery.js or Zepto.js
  21. 21. jQuery Demo
  22. 22. Tip #1 Avoid the DOM
  23. 23. Avoid the DOM • The DOM is REALLY Slow • Avoid accessing it when possible • Do work offline then update DOM
  24. 24. DOM Access Demo
  25. 25. Resources
  26. 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. 27. Books • High Performance JavaScript
 Nicholas C. Zakas • JavaScript Ninja
 John Resig & Bear Bibeaults • JavaScript: The Good Parts
 Douglas Crockford

  28. 28. Summary
  29. 29. Summary • Avoid the DOM • Watch your plugins • Reduce the work done in loops • Prefer local variables • Use as few files as possible
  30. 30. The Rock n Coder • http://therockncoder.blogspot.com • http://www.youtube.com/user/rockncoder • https://github.com/Rockncoder • http://www.slideshare.net/rockncoder
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×