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.

Jax Ajax Architecture

1.882 Aufrufe

Veröffentlicht am

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

Jax Ajax Architecture

  1. 1. AJAX Architectural Considerations Alois Reitbauer | dyna Trace Software
  2. 2. Things are changing …
  3. 3. AJAX – What it is about
  4. 4. The „New“ Web The „Classical“ Web
  5. 5. Paradigm Shift in Web Apps past now Browser Server
  6. 6. The new runtimes …
  7. 7. <ul><li>usage higher in corporate environments </li></ul>Internet Explorer May 2009, www.hitslink.com 60%
  8. 8. … some things don‘t
  9. 9. 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 … .
  10. 10. The Browser
  11. 11. The Anatomy of the Browser JavaScript Engine DOM Renderer Daten XHR Connection Pool .html . .png .js .css .css
  12. 12. What to care about Browser Server JavaScript Performance HTML Rendering AJAX/HTTP calls Latency Datavolume Content construction Network Caching Server
  13. 13. Connection Handling
  14. 14. Understanding Browser Connections <ul><li>Connections are limited by domain </li></ul><ul><ul><li>Guaranteed 2 connections </li></ul></ul><ul><ul><li>Most browsers use 4 </li></ul></ul><ul><li>Domain sharding can help here </li></ul><ul><ul><li>More Domains for more connections </li></ul></ul><ul><ul><li>Seperate domains by content type </li></ul></ul><ul><ul><li>But not more that 4 </li></ul></ul>
  15. 16. <script src=‘content.mydomain.com/query.js?q=ajax‘ />
  16. 17. Caching No man pays double or twice for the same thing, forasmuch as nothing can be spent but once.   William Petty 
  17. 18. Caching on the Web Clients Server Cache per Client Server providing Caching Information Proxy Cache for Many Clients Serverside Data Cache
  18. 19. 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>
  19. 20. 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>
  20. 21. 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>
  21. 22. Rendering
  22. 23. 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>
  23. 24. Asynchronous Rendering
  24. 25. … be ware of property access
  25. 26. <ul><li>Minimize HTTP Requests </li></ul><ul><li>GZIP Content </li></ul><ul><li>Minifiy CSS and JavaScript </li></ul><ul><ul><ul><ul><ul><li>CSS up </li></ul></ul></ul></ul></ul><ul><li>JavaScript down </li></ul><ul><li>Avoid Redirects </li></ul><ul><li>Etags, Content Expiration </li></ul><ul><li>Make AJAX Cacheable </li></ul><ul><li>Split across domains </li></ul><ul><li>Avoid DNS lookups </li></ul><ul><li>… </li></ul>http://developer.yahoo.com/performance/rules.html
  26. 27. Questions ?
  27. 28. alois.reitbauer@dynatrace.com Mail blog.dynatrace.com Blog AloisReitbauer Twitter http://ajax.dynatrace.com

×