TSSJS2010 Presenatation on: Performance Anti Patterns In Ajax Applications


Published on

I gave this presentation at TSSJS 2010

Published in: Technology, Design
1 Comment
  • Does www.gap.com know you used them for your example?
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

TSSJS2010 Presenatation on: Performance Anti Patterns In Ajax Applications

  1. 1. Performance Anti-Patterns in Ajax Applications Andreas Grabner Technology Strategist dynaTrace Software Inc. [email_address]
  2. 2. { “name” : “Andreas Grabner”, “blog” : “http://blog.dynatrace.com”, “worked for” : “Segue Software, Borland Software” “working for” : “dynaTrace Software”, “location”: “Boston, MA”, “Focus” : “Application Performance Management”, “Latest Project” : “dynaTrace AJAX Edition” }
  3. 3. What will we cover today? * Anatomy of Web 2.0 Applications * Impact of End-User Performance on your end-users * Common Performance Anti-Patterns * Real Life Examples of why pages are slow What will you learn? * Avoid common mistakes when using frameworks like jQuery, … * What are expensive operations in AJAX Apps * How to analyze your slow web pages in 5 minutes with free tools
  4. 4. The Anatomy of a Web 2.0 Application Server Latency Datavolume Content Construction Caching Network Browser JavaScript Layouting AJAX/XHR Calls Rendering DOM
  5. 5. Impact of End-User Performance Bing & Google tested end user click behavior with artificially slowed pages http://radar.oreilly.com/2009/06/bing-and-google-agree-slow-pag.html Shopzilla boosted business with faster performance http://en.oreilly.com/velocity2009/public/schedule/detail/7709
  6. 6. Performance „Anti“ - Patterns <ul><li>Too many network requests </li></ul><ul><li>Network Latency and Connection Handling </li></ul><ul><li>Mistakes when using JavaScript frameworks </li></ul>
  7. 7. Too many network requests <ul><li>Too many resources on page </li></ul><ul><ul><li>Have seen up to 50 JavaScript files on a single page </li></ul></ul><ul><ul><li>Use CSS Sprites to „merge“ resources </li></ul></ul><ul><ul><li>Don‘t do it pre-maturely -> whats the overhead in the browser? </li></ul></ul><ul><li>Caching Content </li></ul><ul><ul><li>Wrong Cache Headers or simply forgot about caching </li></ul></ul><ul><ul><li>Make sure you cache the right things for the right time </li></ul></ul><ul><li>Excessive Logging or End-User Monitor Overhead </li></ul><ul><ul><li>XHR Requests for every JavaScript trigger </li></ul></ul><ul><ul><li>Weight the cost of end-user monitoring </li></ul></ul>
  8. 8. Too many network requests <ul><li>Related Blog Entry </li></ul><ul><ul><li>http://blog.dynatrace.com/2009/10/28/101-on-https-web-site-performance-impact/ </li></ul></ul>Too many resources that delay page load
  9. 9. Network Latency and Connection Handling <ul><li>Browsers use different # of connections per domain </li></ul><ul><ul><li>Only X resources can be downloaded in parallel </li></ul></ul><ul><ul><li>Use Domain Sharding to overcome browser connection limitation </li></ul></ul><ul><li>Expensive connects / re-connects </li></ul><ul><ul><li>SSL Handshake is expensive – done on multiple domains </li></ul></ul><ul><ul><li>Connection-Close header sent by server for every request </li></ul></ul><ul><ul><li>Check your server settings and make smart use of your domains </li></ul></ul><ul><li>High Network Latency </li></ul><ul><ul><li>High latency for certain geographical regions </li></ul></ul><ul><ul><li>Investigate in CDN‘s (Content Deliver Networks) </li></ul></ul>
  10. 10. Network Latency and Connection Handling <ul><li>Related Blog Entry </li></ul><ul><ul><li>http://blog.dynatrace.com/2009/10/28/101-on-https-web-site-performance-impact/ </li></ul></ul>2/3rd of the time spent in establishing connection
  11. 11. Mistakes when using JavaScript Frameworks <ul><li>CSS Selectors </li></ul><ul><ul><li>$(“.myclass“) is very expensive on IE </li></ul></ul><ul><ul><li>$$(“[id=^partialIdName]“) is very expensive on every browser </li></ul></ul><ul><ul><li>Be smart with your choice of CSS Selectors </li></ul></ul><ul><li>Global Event Handlers </li></ul><ul><ul><li>e.g.: jQuery Live Events critical for expensive CSS Selectors </li></ul></ul><ul><li>3rd Party Frameworks </li></ul><ul><ul><li>Frameworks that manipulate the DOM can be very expensive </li></ul></ul><ul><ul><li>Need to iterate through DOM (get slower the bigger the page) </li></ul></ul><ul><ul><li>Analyze Frameworks and test with different HTML sizes </li></ul></ul>
  12. 12. Mistakes when using JavaScript Frameworks <ul><li>Related Blog Entries </li></ul><ul><ul><li>http ://blog.dynatrace.com/2009/11/30/101-on-prototype-css-selectors/ </li></ul></ul><ul><ul><li>http://blog.dynatrace.com/2009/11/23/performance-analysis-of-dynamic-javascript-menus/ </li></ul></ul><ul><ul><li>http:// blog.dynatrace.com/2009/11/09/101-on-jquery-selector-performance/ </li></ul></ul>$(“.tooltip“) results in Getting ALL DOM Elements Iterating through EVERY SINGLE ONE
  13. 13. Real Life Examples of why pages are slow <ul><li>Expensive CSS Selectors </li></ul>
  14. 14. Real Life Examples of why pages are slow <ul><li>Global Lookups on non-existing DOM elements </li></ul>Lines in Red are lookups that are not on the page In a global event handler these lookups add > 1s to every page load time
  15. 15. Real Life Examples of why pages are slow
  16. 16. How to analyze your slowest web pages <ul><li>A 5 Minutes Guide to analyze Web Site performance using free tools like dynaTrace AJAX Edition, YSlow, SpeedTracer </li></ul><ul><ul><li>It is important to test in every browser </li></ul></ul><ul><ul><li>Use the existing tools available for the specific browser </li></ul></ul><ul><ul><li>Focus on Client, Server and Network </li></ul></ul>For IE: http://ajax.dynatrace.com For Chrome: http://code.google.com/webtoolkit/speedtracer/ For FireFox: http://developer.yahoo.com/yslow/
  17. 17. How to analyze your slowest web pages <ul><li>Live-Demo with dynaTrace AJAX Edition </li></ul>
  18. 18. Questions