Performance optimization - JavaScript


Published on

Published in: Technology
  • Be the first to comment

  • Be the first to like this

No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Performance optimization - JavaScript

  1. 1. Performance optimization 2 ID meeting 13 th July 2010 Filip Mares
  2. 2. Agenda •Why does it matter? •Browsers and JavaScript •Loading and execution •Write efficient JavaScript code •Responsive interfaces
  3. 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…)
  4. 4. Browsers and JavaScript
  5. 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. 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
  7. 7. Loading and execution
  8. 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
  9. 9. Write efficient JavaScript
  10. 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. 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. 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. 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. 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. 15. Ajax • Avoid using synchronous XMLHttpRequest • Make Ajax Cacheable • Use GET for Ajax Requests • Favour JSON over XML as your data exchange format
  16. 16. Responsive interfaces
  17. 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. 18. Questions?
  19. 19. Thanks for listening
  20. 20. Links •Best Practices for Speeding Up Your Web Site •NCZOnline blog •High Performance Web Sites blog •Web Performance Best Practices