tssjs2010 presenatation on: performance anti patterns in ajax applications
DESCRIPTION
I gave this presentation at TSSJS 2010TRANSCRIPT
![Page 1: TSSJS2010 Presenatation on: Performance Anti Patterns In Ajax Applications](https://reader035.vdocument.in/reader035/viewer/2022062418/55641388d8b42a130c8b54aa/html5/thumbnails/1.jpg)
Performance Anti-Patterns in Ajax Applications
Andreas GrabnerTechnology StrategistdynaTrace Software [email protected]
![Page 2: TSSJS2010 Presenatation on: Performance Anti Patterns In Ajax Applications](https://reader035.vdocument.in/reader035/viewer/2022062418/55641388d8b42a130c8b54aa/html5/thumbnails/2.jpg)
{ “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” }
![Page 3: TSSJS2010 Presenatation on: Performance Anti Patterns In Ajax Applications](https://reader035.vdocument.in/reader035/viewer/2022062418/55641388d8b42a130c8b54aa/html5/thumbnails/3.jpg)
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
![Page 4: TSSJS2010 Presenatation on: Performance Anti Patterns In Ajax Applications](https://reader035.vdocument.in/reader035/viewer/2022062418/55641388d8b42a130c8b54aa/html5/thumbnails/4.jpg)
The Anatomy of a Web 2.0 Application
Server
LatencyDatavolume
ContentConstructio
n
Caching
Network
Browser
JavaScript
Layouting
AJAX/XHRCalls
Rendering
DOM
![Page 5: TSSJS2010 Presenatation on: Performance Anti Patterns In Ajax Applications](https://reader035.vdocument.in/reader035/viewer/2022062418/55641388d8b42a130c8b54aa/html5/thumbnails/5.jpg)
Impact of End-User Performance
Bing & Google tested end user click behavior with artificially slowed pageshttp://radar.oreilly.com/2009/06/bing-and-google-agree-slow-pag.html
Shopzilla boosted business with faster performancehttp://en.oreilly.com/velocity2009/public/schedule/detail/7709
![Page 6: TSSJS2010 Presenatation on: Performance Anti Patterns In Ajax Applications](https://reader035.vdocument.in/reader035/viewer/2022062418/55641388d8b42a130c8b54aa/html5/thumbnails/6.jpg)
Performance „Anti“ - Patterns
Too many network requests
Network Latency and Connection Handling
Mistakes when using JavaScript frameworks
![Page 7: TSSJS2010 Presenatation on: Performance Anti Patterns In Ajax Applications](https://reader035.vdocument.in/reader035/viewer/2022062418/55641388d8b42a130c8b54aa/html5/thumbnails/7.jpg)
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
![Page 8: TSSJS2010 Presenatation on: Performance Anti Patterns In Ajax Applications](https://reader035.vdocument.in/reader035/viewer/2022062418/55641388d8b42a130c8b54aa/html5/thumbnails/8.jpg)
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
![Page 9: TSSJS2010 Presenatation on: Performance Anti Patterns In Ajax Applications](https://reader035.vdocument.in/reader035/viewer/2022062418/55641388d8b42a130c8b54aa/html5/thumbnails/9.jpg)
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)
![Page 10: TSSJS2010 Presenatation on: Performance Anti Patterns In Ajax Applications](https://reader035.vdocument.in/reader035/viewer/2022062418/55641388d8b42a130c8b54aa/html5/thumbnails/10.jpg)
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
![Page 11: TSSJS2010 Presenatation on: Performance Anti Patterns In Ajax Applications](https://reader035.vdocument.in/reader035/viewer/2022062418/55641388d8b42a130c8b54aa/html5/thumbnails/11.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
![Page 12: TSSJS2010 Presenatation on: Performance Anti Patterns In Ajax Applications](https://reader035.vdocument.in/reader035/viewer/2022062418/55641388d8b42a130c8b54aa/html5/thumbnails/12.jpg)
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
![Page 13: TSSJS2010 Presenatation on: Performance Anti Patterns In Ajax Applications](https://reader035.vdocument.in/reader035/viewer/2022062418/55641388d8b42a130c8b54aa/html5/thumbnails/13.jpg)
Real Life Examples of why pages are slowExpensive CSS Selectors
![Page 14: TSSJS2010 Presenatation on: Performance Anti Patterns In Ajax Applications](https://reader035.vdocument.in/reader035/viewer/2022062418/55641388d8b42a130c8b54aa/html5/thumbnails/14.jpg)
Real Life Examples of why pages are slowGlobal 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
![Page 15: TSSJS2010 Presenatation on: Performance Anti Patterns In Ajax Applications](https://reader035.vdocument.in/reader035/viewer/2022062418/55641388d8b42a130c8b54aa/html5/thumbnails/15.jpg)
Real Life Examples of why pages are slow
![Page 16: TSSJS2010 Presenatation on: Performance Anti Patterns In Ajax Applications](https://reader035.vdocument.in/reader035/viewer/2022062418/55641388d8b42a130c8b54aa/html5/thumbnails/16.jpg)
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/
![Page 17: TSSJS2010 Presenatation on: Performance Anti Patterns In Ajax Applications](https://reader035.vdocument.in/reader035/viewer/2022062418/55641388d8b42a130c8b54aa/html5/thumbnails/17.jpg)
How to analyze your slowest web pages
Live-Demo with dynaTrace AJAX Edition
![Page 18: TSSJS2010 Presenatation on: Performance Anti Patterns In Ajax Applications](https://reader035.vdocument.in/reader035/viewer/2022062418/55641388d8b42a130c8b54aa/html5/thumbnails/18.jpg)
Questions