2. Agenda
•Why does it matter?
•Browsers and JavaScript
•Loading and execution
•Write efficient JavaScript code
•Responsive interfaces
3. Why does it matter?
• Fast Internet connections - people have come to expect speed
• More JavaScript code than ever before - download and execute
even more code as you interact
• Rich Web 2.0 applications based on AJAX - Applications stay
open for a long time (Gmail, Facebook…)
5. Browsers and Optimizing Engines
• Chrome
V8
• Safari 4+
Nitro
• Firefox 3.5+
TraceMonkey
• Opera 10.5+
Carakan
• IE9
Chakra
V8 Benchmark Suite v5 score
6000
5000
4000
3000
2000
1000
0
6. Browser limits
• JavaScript is still single-threaded
• Call stack controls how many functions can be executed in a single
process
• Runaway Script timer limits the amount of time a script is allowed to
execute
• Errors occur when call stack size or Execution time or Number of
statements are exceeded
• Behaviour and limits are browser specific
• Avoid too much DOM interaction, too much recursion, long-running
loops
8. Optimize loading and execution
• Put Scripts at the bottom of the page
• Combine, Minify and Gzip Scripts
• Download JavaScript in a nonblocking fashion
• Dynamically create <script> elements to download and execute the code
• Download the JavaScript code using an XHR object, and then inject the code
into the page
• If you need inline script at the top of the page,
put it before the stylesheets
10. Data access & scope management
• Accessing data from a literal or a local variable is fastest
• The deeper the object property, the longer it takes to retrieve
• The further into the scope chain, the slower the resolution
• Use closures sparingly - calling the closure means three objects
in the scope chain (minimum)
• Avoid the with statement, be careful with try-catch
• Avoid using eval()
Never pass a string to the setTimeout and setInterval functions.
Instead, pass an anonymous function
11. DOM
• Minimize DOM access, perform DOM manipulations off the document
• Use local variables to store DOM references you’ll access repeatedly
• Be careful using HTMLCollection objects, make a copy into an array
for heavy work on collections
• Batch CSS changes to minimize repaint/reflow
• Use classNames instead of inline styles except for animations
• Position absolutely during animations
• Use event delegation to minimize the number of event handlers
12. Flow control
• Ensure that the most common conditions are first
• For a large number of discrete values to test use a Lookup table
• The for, while and do-while loops have the same performance impact
• Avoid the for-in loop unless you need to iterate over a number of
unknown object properties
• To improve loop performance decrease the amount of work done per
iteration and decrease number of iterations
• Use recursion carefully to avoid stack overflow error
13. Loops easy fixes for speed
//for loop
var len = items.length;
for (var i=0; i < items.length; i++) {
process(items[i]);
}
//for loop
for (var i=len; i--;) {
process(items[i]);
//do-while loop
}
var j=0;
do {
//do-while loop
process(items[j]);
} while (j < items.length);
var j=len - 1;
do {
process(items[j]);
//while loop
} while (j--);
var k=0;
while (k < items.length) {
process(items[k++]);
}
//while loop
var k=len;
while (k--) {
process(items[k]);
}
14. Strings and regular expressions
• Optimize string concatenation – use array joining when concatenating
numerous or large strings
• Don’t use the regex constructor, use regular expression literals instead
• Backtracking is a frequent source of regex inefficiency – test regex
on strings of varying lengths that match, don’t mach and nearly match
• Split complex regexes into simpler pieces
• Regexes are not always the best tool for the job
15. Ajax
• Avoid using synchronous XMLHttpRequest
• Make Ajax Cacheable
• Use GET for Ajax Requests
• Favour JSON over XML as your data exchange format
17. Responsible User Interface
• No JavaScript task should take longer than 100ms to execute
• Browsers behave differently in response to user interaction during
JavaScript execution
• Timers can be used to schedule code for later execution
• Web workers are a feature in newer browsers that allow you to
execute JavaScript code outside the UI thread
20. Links
•Best Practices for Speeding Up Your Web Site
http://developer.yahoo.com/performance/rules.html
•NCZOnline blog
http://www.nczonline.net/blog/
•High Performance Web Sites blog
http://www.stevesouders.com/blog/
•Web Performance Best Practices
http://code.google.com/speed/page-speed/docs/rules_intro.html
