• Save
Performance optimization - JavaScript
Upcoming SlideShare
Loading in...5

Like this? Share it with your network


Performance optimization - JavaScript






Total Views
Views on SlideShare
Embed Views



0 Embeds 0

No embeds



Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment

Performance optimization - JavaScript Presentation Transcript

  • 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…)
  • 4. Browsers and JavaScript
  • 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
  • 7. Loading and execution
  • 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. Write efficient JavaScript
  • 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
  • 16. Responsive interfaces
  • 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?
  • 19. Thanks for listening
  • 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