Performance anti patterns in ajax applications

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 ,[object Object],[object Object],[object Object]

Too many network requests ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Too many network requests ,[object Object],[object Object],Too many resources that delay page load

Network Latency and Connection Handling ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Network Latency and Connection Handling ,[object Object],[object Object],2/3rd of the time spent in establishing connection

Mistakes when using JavaScript Frameworks ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Mistakes when using JavaScript Frameworks ,[object Object],[object Object],[object Object],[object Object],$(“.tooltip“) results in Getting ALL DOM Elements Iterating through EVERY SINGLE ONE

Real Life Examples of why pages are slow ,[object Object]

Real Life Examples of why pages are slow ,[object Object],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 ,[object Object],[object Object],[object Object],[object Object],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 ,[object Object]

Performance anti patterns in ajax applications

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to Performance anti patterns in ajax applications

Similar to Performance anti patterns in ajax applications (20)

More from SergeyChernyshev

More from SergeyChernyshev (20)

Recently uploaded

Recently uploaded (20)

Performance anti patterns in ajax applications