Ajaxworld07

380 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
380
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
3
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!

×