Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

W-JAX Performance Workshop - Web and AJAX


Published on

Published in: Technology
  • Be the first to comment

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: 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. Mail Blog AloisReitbauer Twitter