Javascript Performance:

Speeding up your Ajax apps

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!

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 small
efciencies, say about 97% of the
time: premature optimization is
the root of all evil. Yet we should
not pass up our opportunities in
that critical 3%.
- Donald Knuth

Javascript Optimization

Prole Your Code!

Use Firebug

80/20 Rule

Working within the

limitations
Proling 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');
Firebug for Proling

Helps you know what to optimize

Use Firebug - http://www.getrebug.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 underlying algorithms

(browsers internal implementations of js)

Not all browsers implement things the same

way
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

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 its 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
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 its 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
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 its 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
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 its 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
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 its 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!
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

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
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';
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 difcult.
- Microsoft executive Jonathan Roberts, e-mail, March 28, 1997
DOM Interactions

Minimize Reows

Set display: none; before multiple DOM updates

appendChild from the inside out

Mitigate Reows

Prevent reows from cascading

Absolutely position if necessary

Manage Reows

Consider faking more complex DOM structures with

simpler dynamic structures (onScroll)
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

User Experience
User Experience

Browsers are Single Threaded

setTimeout is your friend

Interactivity beats Response Time

Keep users informed

Programmers need to be part psychologist

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/javascript/jsmin.html

Set Expiration Date

Helps with caching

Resources

Slides at:

http://ryanstout.webs.com/

Opera:

http://dev.opera.com/articles/view/efcient-javascript/

IE:

http://blogs.msdn.com/ie/archive/2006/08/28/728654.aspx
EOF

Questions?/Comments

Freewebs.com - Were Hiring!

Thanks!