Your SlideShare is downloading. ×
Performance optimization - JavaScript
Upcoming SlideShare
Loading in...5

Thanks for flagging this SlideShare!

Oops! An error has occurred.


Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

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

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

No notes for slide


  • 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 •NCZOnline blog •High Performance Web Sites blog •Web Performance Best Practices