Performance anti patterns in ajax applications
Download as ppt, pdf4 likes1,245 views
The document discusses performance anti-patterns in Ajax applications. It covers the anatomy of web 2.0 applications, the impact of slow performance on users, common mistakes that degrade performance such as too many network requests and latency issues, and how to analyze page speed using free tools. The presentation aims to teach attendees how to avoid common framework pitfalls and optimize Ajax application performance.
![Performance Anti-Patterns in Ajax Applications Andreas Grabner Technology Strategist dynaTrace Software Inc. [email_address]](https://image.slidesharecdn.com/performanceanti-patternsinajaxapplications-100813164308-phpapp01/85/Performance-anti-patterns-in-ajax-applications-1-320.jpg)
![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](https://image.slidesharecdn.com/performanceanti-patternsinajaxapplications-100813164308-phpapp01/85/Performance-anti-patterns-in-ajax-applications-11-320.jpg)
More Related Content
What's hot (20)
Similar to Performance anti patterns in ajax applications (20)
More from SergeyChernyshev (20)
Recently uploaded (20)
Performance anti patterns in ajax applications
- 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