Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.
Java Enterprise Performance Web/AJAX Performance
Overview Web Performance Browser Server JavaScript Performance HTML Rendering Many AJAX/HTTP calls High Latency High Datav...
HTTP – The Protocol of the Web <ul><li>Request/Response Protocol </li></ul><ul><li>Synchronous Protocol </li></ul><ul><li>...
The Anatomy of the Browser JavaScript Engine DOM   Renderer Daten XHR Connection Pool .html . .png .js .css .css
Understanding Browser Connections <ul><li>Connections are limited by domain </li></ul><ul><li>Guaranteed 2 connections </l...
<ul><li>Live Demo </li></ul>
<ul><li>Live Demo </li></ul>
State Handling in Web Applications <ul><li>Request State </li></ul><ul><ul><li>State from one request to the next </li></u...
State and Where to Put It <ul><li>HTTP Session </li></ul><ul><ul><li>Consumes server memory </li></ul></ul><ul><ul><li>Bew...
Caching on the Web Clients Server Cache per Client Server providing Caching Information Proxy Cache for Many Clients Serve...
Understanding HTTP Headers <ul><li>Date </li></ul><ul><ul><li>Defines last modification of a resource </li></ul></ul><ul><...
AJAX ≠AJAX <ul><li>Content can be anything </li></ul><ul><ul><li>XML, JSON, HTML, JavaScript, … </li></ul></ul><ul><li>Com...
<ul><li>Live Demo </li></ul>
Java Script Performance <ul><li>Do not use as OO language </li></ul><ul><li>„ Stupid“ things might make sense </li></ul><u...
<ul><li>Live Demo </li></ul>
Rendering <ul><li>Rendering has a major performance impact on performance </li></ul><ul><li>Browser work differently </li>...
Memory Leaks <ul><li>Internet Explorer Memory Leaks </li></ul><ul><li>Be aware of closures </li></ul><ul><li>function doSt...
<ul><li>Problem Patterns </li></ul>
Antipattern – Too Many Requests <ul><li>Description </li></ul><ul><li>Content is requests due to wrong usage of HTTP heade...
Antipattern – Mixed Security <ul><li>Description </li></ul><ul><li>Switching between HTTPS and HTTP content causes constan...
Antipattern – Wrong State Management <ul><li>Description </li></ul><ul><li>Too much state is kept in the application and p...
Antipattern – Too Much Synchronizity <ul><li>Description </li></ul><ul><li>Too much state is kept in the application and p...
Antipattern – Sending too much data <ul><li>Description </li></ul><ul><li>Too much data is transfered between the server a...
Antipattern – Business Logic Drives Architecture <ul><li>Description </li></ul><ul><li>Business requirements lead to appli...
Antipattern – Underestimating the Browser <ul><li>Description </li></ul><ul><li>Unexpexted performance problems due to mis...
<ul><li>Testing </li></ul>
<ul><li>Live Demo </li></ul>
alois.reitbauer@dynatrace.com  Mail blog.dynatrace.com  Blog AloisReitbauer   Twitter
Nächste SlideShare
Wird geladen in …5
×

W-JAX Performance Workshop - Web and AJAX

915 Aufrufe

Veröffentlicht am

Veröffentlicht in: Technologie
  • Als Erste(r) kommentieren

W-JAX Performance Workshop - Web and AJAX

  1. 1. Java Enterprise Performance Web/AJAX Performance
  2. 2. Overview Web Performance Browser Server JavaScript Performance HTML Rendering Many AJAX/HTTP calls High Latency High Datavolume Thread-/ Connectionpools Network Database Access WebService/ Backend Calls Browser Browser
  3. 3. HTTP – The Protocol of the Web <ul><li>Request/Response Protocol </li></ul><ul><li>Synchronous Protocol </li></ul><ul><li>Optimized for Ressource Distribution </li></ul>Browser Server GET /index.html HTTP/1.1 Host: www.example.net HTTP/1.1 200 OK Content-Type: text/html … .
  4. 4. The Anatomy of the Browser JavaScript Engine DOM Renderer Daten XHR Connection Pool .html . .png .js .css .css
  5. 5. Understanding Browser Connections <ul><li>Connections are limited by domain </li></ul><ul><li>Guaranteed 2 connections </li></ul><ul><li>Most browsers use 4 </li></ul><ul><li>Domain sharding can help here </li></ul><ul><ul><li>More Domains for more connections </li></ul></ul>
  6. 6. <ul><li>Live Demo </li></ul>
  7. 7. <ul><li>Live Demo </li></ul>
  8. 8. State Handling in Web Applications <ul><li>Request State </li></ul><ul><ul><li>State from one request to the next </li></ul></ul><ul><li>Conversational State </li></ul><ul><ul><li>State across several requests </li></ul></ul><ul><ul><li>Needed for a unit of work </li></ul></ul><ul><li>Session State </li></ul><ul><ul><li>State valid and REQUIRED for the whole user session </li></ul></ul>
  9. 9. State and Where to Put It <ul><li>HTTP Session </li></ul><ul><ul><li>Consumes server memory </li></ul></ul><ul><ul><li>Beware of replication (if possible) </li></ul></ul><ul><li>Cookie </li></ul><ul><ul><li>Put small content here </li></ul></ul><ul><ul><li>Can be encrypted </li></ul></ul><ul><li>The Browser </li></ul><ul><ul><li>Specifically in AJAX applications </li></ul></ul><ul><ul><li>Think Rich Client </li></ul></ul>
  10. 10. Caching on the Web Clients Server Cache per Client Server providing Caching Information Proxy Cache for Many Clients Serverside Data Cache
  11. 11. Understanding HTTP Headers <ul><li>Date </li></ul><ul><ul><li>Defines last modification of a resource </li></ul></ul><ul><li>Expires </li></ul><ul><ul><li>Defines how long this resource is valid </li></ul></ul><ul><li>E-Tag </li></ul><ul><ul><li>Uniquely identifies a resource </li></ul></ul><ul><li>Cache-Control </li></ul><ul><ul><li>Defines caching strategy </li></ul></ul>
  12. 12. AJAX ≠AJAX <ul><li>Content can be anything </li></ul><ul><ul><li>XML, JSON, HTML, JavaScript, … </li></ul></ul><ul><li>Communication can be handled in multiple ways </li></ul><ul><ul><li>XmlHttpRequest, Script Tags, Partial Content </li></ul></ul>
  13. 13. <ul><li>Live Demo </li></ul>
  14. 14. Java Script Performance <ul><li>Do not use as OO language </li></ul><ul><li>„ Stupid“ things might make sense </li></ul><ul><li>Do not use CSS Selectors </li></ul><ul><li>Understand Impact of Frameworks </li></ul>
  15. 15. <ul><li>Live Demo </li></ul>
  16. 16. Rendering <ul><li>Rendering has a major performance impact on performance </li></ul><ul><li>Browser work differently </li></ul><ul><li>Layouting in browser is based on frames </li></ul><ul><li>Understand rendering </li></ul><ul><ul><li>Browsers think in frames </li></ul></ul><ul><ul><li>Layouting (Reflow) performed asynchronously </li></ul></ul>
  17. 17. Memory Leaks <ul><li>Internet Explorer Memory Leaks </li></ul><ul><li>Be aware of closures </li></ul><ul><li>function doStuff (AJAX response){ </li></ul><ul><li>var myElems = // newly created Element in dom </li></ul><ul><li>for … // interate over elements </li></ul><ul><li>myElem.onClick= function (){ </li></ul><ul><li>// do something if someone clicks </li></ul><ul><li>} </li></ul><ul><li>} </li></ul>
  18. 18. <ul><li>Problem Patterns </li></ul>
  19. 19. Antipattern – Too Many Requests <ul><li>Description </li></ul><ul><li>Content is requests due to wrong usage of HTTP headers or bad AJAX interactions. </li></ul><ul><li>Resolution </li></ul><ul><li>Properly tune content expiration and remote protocols. Avoid redirects when possible </li></ul>
  20. 20. Antipattern – Mixed Security <ul><li>Description </li></ul><ul><li>Switching between HTTPS and HTTP content causes constant connection reastablishment </li></ul><ul><li>Resolution </li></ul><ul><li>Use seperate domains or serve everthing via HTTPS </li></ul>
  21. 21. Antipattern – Wrong State Management <ul><li>Description </li></ul><ul><li>Too much state is kept in the application and possibly even replicated </li></ul><ul><li>Resolution </li></ul><ul><li>Design state management to be minimal and manage according to use case </li></ul>
  22. 22. Antipattern – Too Much Synchronizity <ul><li>Description </li></ul><ul><li>Too much state is kept in the application and possibly even replicated </li></ul><ul><li>Resolution </li></ul><ul><li>Design state management to be minimal and manage according to use case </li></ul>
  23. 23. Antipattern – Sending too much data <ul><li>Description </li></ul><ul><li>Too much data is transfered between the server and the client. </li></ul><ul><li>Resolution </li></ul><ul><li>Use zipped content, minify content use CSS Sprites where reasonable </li></ul>
  24. 24. Antipattern – Business Logic Drives Architecture <ul><li>Description </li></ul><ul><li>Business requirements lead to application flows that lead to bad performance </li></ul><ul><li>Resolution </li></ul><ul><li>Trust architects, when they say things are no good idea ;-) Investigate architectural implications early in app design. </li></ul>
  25. 25. Antipattern – Underestimating the Browser <ul><li>Description </li></ul><ul><li>Unexpexted performance problems due to missing browser testing. </li></ul><ul><li>Resolution </li></ul><ul><li>See the browser as part of your applications. If it must run a browser test it. </li></ul>
  26. 26. <ul><li>Testing </li></ul>
  27. 27. <ul><li>Live Demo </li></ul>
  28. 28. alois.reitbauer@dynatrace.com Mail blog.dynatrace.com Blog AloisReitbauer Twitter

×