TSSJS2010 Presenatation on: Performance Anti Patterns In Ajax Applications
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

TSSJS2010 Presenatation on: Performance Anti Patterns In Ajax Applications

on

  • 3,570 views

I gave this presentation at TSSJS 2010

I gave this presentation at TSSJS 2010

Statistics

Views

Total Views
3,570
Views on SlideShare
2,615
Embed Views
955

Actions

Likes
3
Downloads
59
Comments
1

4 Embeds 955

http://thatstoday.com 943
http://www.slideshare.net 10
http://static.slidesharecdn.com 1
http://www.slashdocs.com 1

Accessibility

Categories

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.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
  • Does www.gap.com know you used them for your example?
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

TSSJS2010 Presenatation on: Performance Anti Patterns In Ajax Applications Presentation 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