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

TSSJS2010 Presenatation on: Performance Anti Patterns In Ajax Applications

on

  • 3,500 views

I gave this presentation at TSSJS 2010

I gave this presentation at TSSJS 2010

Statistics

Views

Total Views
3,500
Slideshare-icon Views on SlideShare
2,545
Embed Views
955

Actions

Likes
3
Downloads
57
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

11 of 1

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

    • Performance Anti-Patterns in Ajax Applications Andreas Grabner Technology Strategist dynaTrace Software Inc. [email_address]
    • { “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” }
    • 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
    • The Anatomy of a Web 2.0 Application Server Latency Datavolume Content Construction Caching Network Browser JavaScript Layouting AJAX/XHR Calls Rendering DOM
    • 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
    • Performance „Anti“ - Patterns
      • Too many network requests
      • Network Latency and Connection Handling
      • Mistakes when using JavaScript frameworks
    • 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
    • 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
    • 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)
    • 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
    • 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
    • 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
    • Real Life Examples of why pages are slow
      • Expensive CSS Selectors
    • 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
    • Real Life Examples of why pages are slow
    • 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/
    • How to analyze your slowest web pages
      • Live-Demo with dynaTrace AJAX Edition
    • Questions