Date post: | 26-May-2015 |
Category: |
Technology |
Upload: | guestc75cdc |
View: | 2,599 times |
Download: | 4 times |
Performance Anti-Patterns in Ajax Applications
Andreas GrabnerTechnology StrategistdynaTrace Software [email protected]
{ “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
LatencyDatavolume
ContentConstructio
n
Caching
Network
Browser
JavaScript
Layouting
AJAX/XHRCalls
Rendering
DOM
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
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 slowExpensive CSS Selectors
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
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