Performance optimization - JavaScript

  • 149 views
Uploaded on

 

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
149
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
0
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

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