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
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
25. User Experience
• Browsers are Single Threaded
• setTimeout is your friend
• Interactivity beats Response Time
• Keep users informed
• Programmers need to be part psychologist
