Your SlideShare is downloading. ×
0
TSSJS2010 Presenatation on: Performance Anti Patterns In Ajax Applications
TSSJS2010 Presenatation on: Performance Anti Patterns In Ajax Applications
TSSJS2010 Presenatation on: Performance Anti Patterns In Ajax Applications
TSSJS2010 Presenatation on: Performance Anti Patterns In Ajax Applications
TSSJS2010 Presenatation on: Performance Anti Patterns In Ajax Applications
TSSJS2010 Presenatation on: Performance Anti Patterns In Ajax Applications
TSSJS2010 Presenatation on: Performance Anti Patterns In Ajax Applications
TSSJS2010 Presenatation on: Performance Anti Patterns In Ajax Applications
TSSJS2010 Presenatation on: Performance Anti Patterns In Ajax Applications
TSSJS2010 Presenatation on: Performance Anti Patterns In Ajax Applications
TSSJS2010 Presenatation on: Performance Anti Patterns In Ajax Applications
TSSJS2010 Presenatation on: Performance Anti Patterns In Ajax Applications
TSSJS2010 Presenatation on: Performance Anti Patterns In Ajax Applications
TSSJS2010 Presenatation on: Performance Anti Patterns In Ajax Applications
TSSJS2010 Presenatation on: Performance Anti Patterns In Ajax Applications
TSSJS2010 Presenatation on: Performance Anti Patterns In Ajax Applications
TSSJS2010 Presenatation on: Performance Anti Patterns In Ajax Applications
TSSJS2010 Presenatation on: 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

TSSJS2010 Presenatation on: Performance Anti Patterns In Ajax Applications

2,614

Published on

I gave this presentation at TSSJS 2010

I gave this presentation at TSSJS 2010

Published in: Technology, Design
1 Comment
3 Likes
Statistics
Notes
  • Does www.gap.com know you used them for your example?
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total Views
2,614
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
61
Comments
1
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 <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. 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. 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. 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. 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. 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. 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. Real Life Examples of why pages are slow <ul><li>Expensive CSS Selectors </li></ul>
  • 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. Real Life Examples of why pages are slow
  • 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. How to analyze your slowest web pages <ul><li>Live-Demo with dynaTrace AJAX Edition </li></ul>
  • 18. Questions

×