![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]);
}](https://image.slidesharecdn.com/performanceoptimization2-140208105029-phpapp02/85/Performance-optimization-JavaScript-13-320.jpg)
Performance optimization - JavaScript
- 1. Performance optimization 2 ID meeting 13 th July 2010 Filip Mares
- 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
- 18. Questions?
- 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