This document discusses optimizing JavaScript performance. It covers profiling code to find bottlenecks, following the 80/20 rule to focus optimization efforts, working within browser limitations, avoiding global variables and unnecessary DOM lookups, minimizing reflows, and delivering code efficiently through minification, concatenation, caching and other techniques. Overall it provides tips for optimizing user experience through faster JavaScript.

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!