Your SlideShare is downloading. ×
Ajaxworld07
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Ajaxworld07

266
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
266
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
3
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Javascript Performance: Speeding up your Ajax apps
  • 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. Areas of Focus • Javascript Optimization • DOM Interactions • User Experience • Application Delivery
  • 4. Why Javascript Optimizing is Important • Slow Apps loose users • Example: Yahoo! Mail beta vs Gmail
  • 5. Why Javascript Optimizing is Important
  • 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. Javascript Optimization • Profile Your Code! • Use Firebug • 80/20 Rule • Working within the limitations
  • 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. Firebug for Profiling • Helps you know what to optimize • Use Firebug - http://www.getfirebug.com/
  • 10. 80/20 Rule • Think before you optimize • No compulsive optimizing • Life is too short to optimize in the wrong spot
  • 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. User Experience
  • 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. Application Delivery
  • 27. Application Delivery • Load Time Factors: • File Size • Number of Files • Caching
  • 28. Load Time Analysis
  • 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. 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. EOF • Questions?/Comments • Freewebs.com - We’re Hiring! • Thanks!

×