Your SlideShare is downloading. ×
Performance anti patterns in ajax applications
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Saving this for later?

Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime - even offline.

Text the download link to your phone

Standard text messaging rates apply

Performance anti patterns in ajax applications

1,855
views

Published on

Presentation by Andreas Grabner (dynaTrace Software Inc.) at TheServerSide Java Symposium

Presentation by Andreas Grabner (dynaTrace Software Inc.) at TheServerSide Java Symposium

Published in: Technology

0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,855
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
19
Comments
0
Likes
3
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 Anti-Patterns in Ajax Applications Andreas Grabner Technology Strategist dynaTrace Software Inc. [email_address]
  • 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. 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. The Anatomy of a Web 2.0 Application Server Latency Datavolume Content Construction Caching Network Browser JavaScript Layouting AJAX/XHR Calls Rendering DOM
  • 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. Performance „Anti“ - Patterns
    • Too many network requests
    • Network Latency and Connection Handling
    • Mistakes when using JavaScript frameworks
  • 7. Too many network requests
    • Too many resources on page
      • Have seen up to 50 JavaScript files on a single page
      • Use CSS Sprites to „merge“ resources
      • Don‘t do it pre-maturely -> whats the overhead in the browser?
    • Caching Content
      • Wrong Cache Headers or simply forgot about caching
      • Make sure you cache the right things for the right time
    • Excessive Logging or End-User Monitor Overhead
      • XHR Requests for every JavaScript trigger
      • Weight the cost of end-user monitoring
  • 8. Too many network requests
    • Related Blog Entry
      • http://blog.dynatrace.com/2009/10/28/101-on-https-web-site-performance-impact/
    Too many resources that delay page load
  • 9. Network Latency and Connection Handling
    • Browsers use different # of connections per domain
      • Only X resources can be downloaded in parallel
      • Use Domain Sharding to overcome browser connection limitation
    • Expensive connects / re-connects
      • SSL Handshake is expensive – done on multiple domains
      • Connection-Close header sent by server for every request
      • Check your server settings and make smart use of your domains
    • High Network Latency
      • High latency for certain geographical regions
      • Investigate in CDN‘s (Content Deliver Networks)
  • 10. Network Latency and Connection Handling
    • Related Blog Entry
      • http://blog.dynatrace.com/2009/10/28/101-on-https-web-site-performance-impact/
    2/3rd of the time spent in establishing connection
  • 11. Mistakes when using JavaScript Frameworks
    • CSS Selectors
      • $(“.myclass“) is very expensive on IE
      • $$(“[id=^partialIdName]“) is very expensive on every browser
      • Be smart with your choice of CSS Selectors
    • Global Event Handlers
      • e.g.: jQuery Live Events critical for expensive CSS Selectors
    • 3rd Party Frameworks
      • Frameworks that manipulate the DOM can be very expensive
      • Need to iterate through DOM (get slower the bigger the page)
      • Analyze Frameworks and test with different HTML sizes
  • 12. Mistakes when using JavaScript Frameworks
    • Related Blog Entries
      • http ://blog.dynatrace.com/2009/11/30/101-on-prototype-css-selectors/
      • http://blog.dynatrace.com/2009/11/23/performance-analysis-of-dynamic-javascript-menus/
      • http:// blog.dynatrace.com/2009/11/09/101-on-jquery-selector-performance/
    $(“.tooltip“) results in Getting ALL DOM Elements Iterating through EVERY SINGLE ONE
  • 13. Real Life Examples of why pages are slow
    • Expensive CSS Selectors
  • 14. Real Life Examples of why pages are slow
    • Global Lookups on non-existing DOM elements
    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. Real Life Examples of why pages are slow
  • 16. How to analyze your slowest web pages
    • A 5 Minutes Guide to analyze Web Site performance using free tools like dynaTrace AJAX Edition, YSlow, SpeedTracer
      • It is important to test in every browser
      • Use the existing tools available for the specific browser
      • Focus on Client, Server and Network
    For IE: http://ajax.dynatrace.com For Chrome: http://code.google.com/webtoolkit/speedtracer/ For FireFox: http://developer.yahoo.com/yslow/
  • 17. How to analyze your slowest web pages
    • Live-Demo with dynaTrace AJAX Edition
  • 18. Questions