W-JAX Performance Workshop - Web and AJAX

659
-1

Published on

Published in: Technology
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
659
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
0
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide
  • Working with caches
  • Working with caches
  • Working with caches
  • Working with caches
  • Working with caches
  • 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

    ×