Javascript Performance:
Speeding up your Ajax apps
Who am I?
• Front-end Developer at Freewebs.com
 • Freewebs is:
   • web publishing platform
   • 17 million unique visito...
Areas of Focus

• Javascript Optimization
• DOM Interactions
• User Experience
• Application Delivery
Why Javascript
Optimizing is Important

• Slow Apps loose users
 • Example: Yahoo! Mail beta vs Gmail
Why Javascript
Optimizing is Important
Javascript Optimization
“We should forget about smallthe
 efficiencies, say about 97% of
  time: premature optimization is
...
Javascript Optimization

•   Profile Your Code!

    •   Use Firebug

•   80/20 Rule

•   Working within the
    limitations
Profiling Code
var start = new Date().getTime();

// Execute code you want to profile
// Compute Pi

var end = new Date().g...
Firebug for Profiling
• Helps you know what to optimize
• Use Firebug - http://www.getfirebug.com/
80/20 Rule
• Think before you optimize
• No compulsive optimizing
• Life is too short to optimize in the wrong
  spot
Working within the
      Limitations
• Algorithms Still Matter
   • (Just usually not the ones you write)
• Harness the un...
Optimizing Javascript vs
  Other Languages

• Focus on use experience not resources use
• Few documents on optimizing
• No...
Be Aware of Poor
        Documentation
•   Using var is optional, but you need to use it if you have
    a variable that h...
Be Aware of Poor
        Documentation
•   Using var is optional, but you need to use it if you have
    a variable that h...
Be Aware of Poor
        Documentation
•   Using var is optional, but you need to use it if you have
    a variable that h...
Be Aware of Poor
        Documentation
•   Using var is optional, but you need to use it if you have
    a variable that h...
Be Aware of Poor
        Documentation
•   Using var is optional, but you need to use it if you have
    a variable that h...
Things to Avoid in
Performance Critical Code
• Global Variables      - use var
•   try-catch-finally   statements
•   with...
Literals Example
var b = false;
b.num = 5;
alert(b.num); // alerts undefined

var b = new Boolean(false);
b.num = 5;
alert...
Things to do:
               Reference Reuse
document.getElementById('report').style.padding = '10px';
document.getElement...
DOM Interactions




Look at why people who get IE with a new machine switch to Navigator
and what is being addressed in I...
DOM Interactions
• Minimize Reflows
     •   Set display: none; before multiple DOM updates

     •   appendChild from the ...
DOM Objects, Closures, and
          Memory Leaks
• Mostly affects IE 6 and below
 • Stems from Flaw in IE garbage collect...
User Experience
User Experience
• Browsers are Single Threaded
 • setTimeout is your friend
 • Interactivity beats Response Time
 • Keep u...
Application Delivery
Application Delivery

• Load Time Factors:
 • File Size
 • Number of Files
 • Caching
Load Time Analysis
.js Delivery Suggestions

• Gzip
• Concat - Lower total requests
• Minify - jsmin
    • http://www.crockford.com/javascrip...
Resources
• Slides at:
 • http://ryanstout.webs.com/
• Opera:
  •   http://dev.opera.com/articles/view/efficient-javascript...
EOF


• Questions?/Comments
• Freewebs.com - We’re Hiring!
• Thanks!
Upcoming SlideShare
Loading in …5
×

Ajaxworld07

405 views

Published on

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

  • Be the first to like this

No Downloads
Views
Total views
405
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
5
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Ajaxworld07

  1. 1. Javascript Performance: Speeding up your Ajax apps
  2. 2. Who am I? • Front-end Developer at Freewebs.com • Freewebs is: • web publishing platform • 17 million unique visitors a month • top 300 site according to alexa • Hiring Javascript Developers!
  3. 3. Areas of Focus • Javascript Optimization • DOM Interactions • User Experience • Application Delivery
  4. 4. Why Javascript Optimizing is Important • Slow Apps loose users • Example: Yahoo! Mail beta vs Gmail
  5. 5. Why Javascript Optimizing is Important
  6. 6. Javascript Optimization “We should forget about smallthe efficiencies, say about 97% of time: premature optimization is the root of all evil. Yet we should not pass up our opportunities in ” that critical 3%. - Donald Knuth
  7. 7. Javascript Optimization • Profile Your Code! • Use Firebug • 80/20 Rule • Working within the limitations
  8. 8. Profiling Code var start = new Date().getTime(); // Execute code you want to profile // Compute Pi var end = new Date().getTime(); alert('Function took: '+ (end-start) + ' ms');
  9. 9. Firebug for Profiling • Helps you know what to optimize • Use Firebug - http://www.getfirebug.com/
  10. 10. 80/20 Rule • Think before you optimize • No compulsive optimizing • Life is too short to optimize in the wrong spot
  11. 11. Working within the Limitations • Algorithms Still Matter • (Just usually not the ones you write) • Harness the underlying algorithms (browsers internal implementations of js) • Not all browsers implement things the same way
  12. 12. Optimizing Javascript vs Other Languages • Focus on use experience not resources use • Few documents on optimizing • Not the same in all browsers • High level optimizing
  13. 13. Be Aware of Poor Documentation • Using var is optional, but you need to use it if you have a variable that has been declared global and you want to re-declare it as a local variable inside a function. * http://www.cs.brown.edu/courses/bridge/1998/res/javascript/ javascript-tutorial.html • The word var is optional (but it’s good style to use it) * http://www.cis.upenn.edu/~matuszek/cit597-2003/Lectures/21- javascript.ppt • The "var" is optional but should be used for good style * http://www.acm.uiuc.edu/webmonkeys/javascript/variables.html
  14. 14. Be Aware of Poor Documentation • Using var is optional, but you need to use it if you have a variable that has been declared global and you want to re-declare it as a local variable inside a function. * http://www.cs.brown.edu/courses/bridge/1998/res/javascript/ javascript-tutorial.html • The word var is optional (but it’s good style to use it) * http://www.cis.upenn.edu/~matuszek/cit597-2003/Lectures/21- javascript.ppt • The "var" is optional but should be used for good style * http://www.acm.uiuc.edu/webmonkeys/javascript/variables.html
  15. 15. Be Aware of Poor Documentation • Using var is optional, but you need to use it if you have a variable that has been declared global and you want to re-declare it as a local variable inside a function. * http://www.cs.brown.edu/courses/bridge/1998/res/javascript/ javascript-tutorial.html • The word var is optional (but it’s good style to use it) * http://www.cis.upenn.edu/~matuszek/cit597-2003/Lectures/21- javascript.ppt • The "var" is optional but should be used for good style * http://www.acm.uiuc.edu/webmonkeys/javascript/variables.html
  16. 16. Be Aware of Poor Documentation • Using var is optional, but you need to use it if you have a variable that has been declared global and you want to re-declare it as a local variable inside a function. * http://www.cs.brown.edu/courses/bridge/1998/res/javascript/ javascript-tutorial.html • The word var is optional (but it’s good style to use it) * http://www.cis.upenn.edu/~matuszek/cit597-2003/Lectures/21- javascript.ppt • The "var" is optional but should be used for good style * http://www.acm.uiuc.edu/webmonkeys/javascript/variables.html
  17. 17. Be Aware of Poor Documentation • Using var is optional, but you need to use it if you have a variable that has been declared global and you want to re-declare it as a local variable inside a function. * http://www.cs.brown.edu/courses/bridge/1998/res/javascript/ javascript-tutorial.html • The word var is optional (but it’s good style to use it) * http://www.cis.upenn.edu/~matuszek/cit597-2003/Lectures/21- javascript.ppt • The "var" is optional but should be used for good style * http://www.acm.uiuc.edu/webmonkeys/javascript/variables.html See me after class!
  18. 18. Things to Avoid in Performance Critical Code • Global Variables - use var • try-catch-finally statements • with statement - should always be avoided • eval • x = new Boolean, Number, String... • Use literals instead, x = 5, ‘blue’, false
  19. 19. Literals Example var b = false; b.num = 5; alert(b.num); // alerts undefined var b = new Boolean(false); b.num = 5; alert(b.num); // alerts 5
  20. 20. Things to do: Reference Reuse document.getElementById('report').style.padding = '10px'; document.getElementById('report').style.margin = '5px'; document.getElementById('report').style.border = '1px black'; // Can be shortened to: (saves 11 lookups) var reportStyle = document.getElementById('report').style; reportStyle.padding = '10px'; reportStyle.margin = '5px'; reportStyle.border = '1px solid black';
  21. 21. DOM Interactions Look at why people who get IE with a new machine switch to Navigator and what is being addressed in IE 4.0 to make that difficult. - Microsoft executive Jonathan Roberts, e-mail, March 28, 1997
  22. 22. DOM Interactions • Minimize Reflows • Set display: none; before multiple DOM updates • appendChild from the inside out • Mitigate Reflows • Prevent reflows from cascading • Absolutely position if necessary • Manage Reflows • Consider faking more complex DOM structures with simpler dynamic structures (onScroll)
  23. 23. DOM Objects, Closures, and Memory Leaks • Mostly affects IE 6 and below • Stems from Flaw in IE garbage collector • Objects in JS are only reclaimed when nothing points to them • Cycles can not be reclaimed • Can be caused by event handlers
  24. 24. User Experience
  25. 25. User Experience • Browsers are Single Threaded • setTimeout is your friend • Interactivity beats Response Time • Keep users informed • Programmers need to be part psychologist
  26. 26. Application Delivery
  27. 27. Application Delivery • Load Time Factors: • File Size • Number of Files • Caching
  28. 28. Load Time Analysis
  29. 29. .js Delivery Suggestions • Gzip • Concat - Lower total requests • Minify - jsmin • http://www.crockford.com/javascript/jsmin.html • Set Expiration Date • Helps with caching
  30. 30. Resources • Slides at: • http://ryanstout.webs.com/ • Opera: • http://dev.opera.com/articles/view/efficient-javascript/ • IE: • http://blogs.msdn.com/ie/archive/2006/08/28/728654.aspx
  31. 31. EOF • Questions?/Comments • Freewebs.com - We’re Hiring! • Thanks!

×