SlideShare une entreprise Scribd logo
1  sur  18
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]
Questions

Contenu connexe

Tendances

Active Server Page(ASP)
Active Server Page(ASP)Active Server Page(ASP)
Active Server Page(ASP)
Keshab Nath
 
Ajax Basics And Framework
Ajax Basics And FrameworkAjax Basics And Framework
Ajax Basics And Framework
shivas
 
Ajax basics
Ajax basicsAjax basics
Ajax basics
Vel004
 

Tendances (20)

JavaScript Introduction
JavaScript IntroductionJavaScript Introduction
JavaScript Introduction
 
Ajax
AjaxAjax
Ajax
 
Ajax
AjaxAjax
Ajax
 
Angularjs & REST
Angularjs & RESTAngularjs & REST
Angularjs & REST
 
ASP.NET MVC and ajax
ASP.NET MVC and ajax ASP.NET MVC and ajax
ASP.NET MVC and ajax
 
Ajax
AjaxAjax
Ajax
 
Pros and Cons of developing a Thick Clientside App
Pros and Cons of developing a Thick Clientside AppPros and Cons of developing a Thick Clientside App
Pros and Cons of developing a Thick Clientside App
 
Architecture in Ajax Applications
Architecture in Ajax ApplicationsArchitecture in Ajax Applications
Architecture in Ajax Applications
 
AJAX
AJAXAJAX
AJAX
 
Ajax
AjaxAjax
Ajax
 
Front-End Development
Front-End DevelopmentFront-End Development
Front-End Development
 
Introduction to ajax
Introduction to ajaxIntroduction to ajax
Introduction to ajax
 
Spicing up SharePoint web parts
Spicing up SharePoint web partsSpicing up SharePoint web parts
Spicing up SharePoint web parts
 
RESTful Web Services with Spring MVC
RESTful Web Services with Spring MVCRESTful Web Services with Spring MVC
RESTful Web Services with Spring MVC
 
Active Server Page(ASP)
Active Server Page(ASP)Active Server Page(ASP)
Active Server Page(ASP)
 
Ajax Basics And Framework
Ajax Basics And FrameworkAjax Basics And Framework
Ajax Basics And Framework
 
ACTIVE SERVER PAGES BY SAIKIRAN PANJALA
ACTIVE SERVER PAGES BY SAIKIRAN PANJALAACTIVE SERVER PAGES BY SAIKIRAN PANJALA
ACTIVE SERVER PAGES BY SAIKIRAN PANJALA
 
WordPress: React Way
WordPress: React WayWordPress: React Way
WordPress: React Way
 
Introduction to ajax
Introduction  to  ajaxIntroduction  to  ajax
Introduction to ajax
 
Ajax basics
Ajax basicsAjax basics
Ajax basics
 

En vedette

Maslow’s hierarchy of needs
Maslow’s hierarchy of needsMaslow’s hierarchy of needs
Maslow’s hierarchy of needs
Cedrick Alguzar
 
Maria montessori powerpoint
Maria montessori powerpointMaria montessori powerpoint
Maria montessori powerpoint
lauralerwill
 
Motivation (final ppt)
Motivation (final ppt)Motivation (final ppt)
Motivation (final ppt)
Snehal Devkar
 

En vedette (15)

Meeting a Montessori Teacher
Meeting a Montessori TeacherMeeting a Montessori Teacher
Meeting a Montessori Teacher
 
contribution of Sidney l. prestley
contribution of Sidney l. prestleycontribution of Sidney l. prestley
contribution of Sidney l. prestley
 
Maria montessori
Maria montessoriMaria montessori
Maria montessori
 
Maria Montessori
Maria MontessoriMaria Montessori
Maria Montessori
 
Learning and Teaching Part A
Learning and Teaching Part ALearning and Teaching Part A
Learning and Teaching Part A
 
Parenting the montessori way
Parenting the montessori wayParenting the montessori way
Parenting the montessori way
 
Importance of Motivation and Maslow theory in the organisation
Importance of Motivation and Maslow theory in the organisationImportance of Motivation and Maslow theory in the organisation
Importance of Motivation and Maslow theory in the organisation
 
Montessori Presentation
Montessori PresentationMontessori Presentation
Montessori Presentation
 
Maslow’s hierarchy of needs
Maslow’s hierarchy of needsMaslow’s hierarchy of needs
Maslow’s hierarchy of needs
 
MASLOWS’ NEED HIERARCHY OF MOTIVATION
MASLOWS’ NEED HIERARCHY OF MOTIVATIONMASLOWS’ NEED HIERARCHY OF MOTIVATION
MASLOWS’ NEED HIERARCHY OF MOTIVATION
 
Importance of Motivation
Importance of MotivationImportance of Motivation
Importance of Motivation
 
Maria montessori powerpoint
Maria montessori powerpointMaria montessori powerpoint
Maria montessori powerpoint
 
Learning and Teaching Part C
Learning and Teaching Part CLearning and Teaching Part C
Learning and Teaching Part C
 
Motivation (final ppt)
Motivation (final ppt)Motivation (final ppt)
Motivation (final ppt)
 
Maslow’s Theory of Hierarchy of Needs
Maslow’s Theory of Hierarchy of NeedsMaslow’s Theory of Hierarchy of Needs
Maslow’s Theory of Hierarchy of Needs
 

Similaire à TSSJS2010 Presenatation on: Performance Anti Patterns In Ajax Applications

Front-end optimisation & jQuery Internals
Front-end optimisation & jQuery InternalsFront-end optimisation & jQuery Internals
Front-end optimisation & jQuery Internals
Artur Cistov
 
Front-end optimisation & jQuery Internals (Pycon)
Front-end optimisation & jQuery Internals (Pycon)Front-end optimisation & jQuery Internals (Pycon)
Front-end optimisation & jQuery Internals (Pycon)
Artur Cistov
 
Ajax Testing Approach
Ajax Testing ApproachAjax Testing Approach
Ajax Testing Approach
HarshaVJoshi
 

Similaire à TSSJS2010 Presenatation on: Performance Anti Patterns In Ajax Applications (20)

Building high scale, highly available websites in SharePoint 2010
Building high scale, highly available websites in SharePoint 2010Building high scale, highly available websites in SharePoint 2010
Building high scale, highly available websites in SharePoint 2010
 
Lessons from the Trenches: Engineering Great AJAX Experiences
Lessons from the Trenches: Engineering Great AJAX ExperiencesLessons from the Trenches: Engineering Great AJAX Experiences
Lessons from the Trenches: Engineering Great AJAX Experiences
 
Lessons
LessonsLessons
Lessons
 
Front-end optimisation & jQuery Internals
Front-end optimisation & jQuery InternalsFront-end optimisation & jQuery Internals
Front-end optimisation & jQuery Internals
 
Modelling Web Performance Optimization - FFSUx
Modelling  Web Performance Optimization - FFSUxModelling  Web Performance Optimization - FFSUx
Modelling Web Performance Optimization - FFSUx
 
Presemtation Tier Optimizations
Presemtation Tier OptimizationsPresemtation Tier Optimizations
Presemtation Tier Optimizations
 
Client-side Website Optimization
Client-side Website OptimizationClient-side Website Optimization
Client-side Website Optimization
 
5 critical-optimizations.v2
5 critical-optimizations.v25 critical-optimizations.v2
5 critical-optimizations.v2
 
Introduction to Jquery
Introduction to JqueryIntroduction to Jquery
Introduction to Jquery
 
Decoding the Web
Decoding the WebDecoding the Web
Decoding the Web
 
Single page applications
Single page applicationsSingle page applications
Single page applications
 
Making Of PHP Based Web Application
Making Of PHP Based Web ApplicationMaking Of PHP Based Web Application
Making Of PHP Based Web Application
 
Performace optimization (increase website speed)
Performace optimization (increase website speed)Performace optimization (increase website speed)
Performace optimization (increase website speed)
 
Dyna trace
Dyna traceDyna trace
Dyna trace
 
Front-end optimisation & jQuery Internals (Pycon)
Front-end optimisation & jQuery Internals (Pycon)Front-end optimisation & jQuery Internals (Pycon)
Front-end optimisation & jQuery Internals (Pycon)
 
Ajax & Reverse Ajax Presenation
Ajax & Reverse Ajax PresenationAjax & Reverse Ajax Presenation
Ajax & Reverse Ajax Presenation
 
Javascript & Jquery
Javascript & JqueryJavascript & Jquery
Javascript & Jquery
 
Ajax Testing Approach
Ajax Testing ApproachAjax Testing Approach
Ajax Testing Approach
 
Ajax Testing Approach
Ajax Testing ApproachAjax Testing Approach
Ajax Testing Approach
 
PrairieDevCon 2014 - Web Doesn't Mean Slow
PrairieDevCon 2014 -  Web Doesn't Mean SlowPrairieDevCon 2014 -  Web Doesn't Mean Slow
PrairieDevCon 2014 - Web Doesn't Mean Slow
 

Dernier

+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
?#DUbAI#??##{{(☎️+971_581248768%)**%*]'#abortion pills for sale in dubai@
 
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Safe Software
 

Dernier (20)

GenAI Risks & Security Meetup 01052024.pdf
GenAI Risks & Security Meetup 01052024.pdfGenAI Risks & Security Meetup 01052024.pdf
GenAI Risks & Security Meetup 01052024.pdf
 
Partners Life - Insurer Innovation Award 2024
Partners Life - Insurer Innovation Award 2024Partners Life - Insurer Innovation Award 2024
Partners Life - Insurer Innovation Award 2024
 
Exploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone ProcessorsExploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone Processors
 
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, AdobeApidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
 
Tata AIG General Insurance Company - Insurer Innovation Award 2024
Tata AIG General Insurance Company - Insurer Innovation Award 2024Tata AIG General Insurance Company - Insurer Innovation Award 2024
Tata AIG General Insurance Company - Insurer Innovation Award 2024
 
Manulife - Insurer Innovation Award 2024
Manulife - Insurer Innovation Award 2024Manulife - Insurer Innovation Award 2024
Manulife - Insurer Innovation Award 2024
 
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost SavingRepurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
 
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
 
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
 
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
 
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
 
Polkadot JAM Slides - Token2049 - By Dr. Gavin Wood
Polkadot JAM Slides - Token2049 - By Dr. Gavin WoodPolkadot JAM Slides - Token2049 - By Dr. Gavin Wood
Polkadot JAM Slides - Token2049 - By Dr. Gavin Wood
 
Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024
 
HTML Injection Attacks: Impact and Mitigation Strategies
HTML Injection Attacks: Impact and Mitigation StrategiesHTML Injection Attacks: Impact and Mitigation Strategies
HTML Injection Attacks: Impact and Mitigation Strategies
 
The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024
 
Real Time Object Detection Using Open CV
Real Time Object Detection Using Open CVReal Time Object Detection Using Open CV
Real Time Object Detection Using Open CV
 
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
 
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law DevelopmentsTrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
 
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time AutomationFrom Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
 
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
 

TSSJS2010 Presenatation on: 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.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15. Real Life Examples of why pages are slow
  • 16.
  • 17.