Architecture in Ajax Applications
•Télécharger en tant que PPTX, PDF•
5 j'aime•2,948 vues
This document summarizes best practices for architecting and optimizing Ajax applications. It discusses how application architectures have evolved from traditional MVC to a more dynamic model with code running in both the server and browser. It provides guidance on improving performance through proper markup, understanding browser specifics, optimizing network usage, caching strategies, and reducing DOM manipulation. The document emphasizes that performance must be a primary consideration in Ajax application design.
Recommandé
Contenu connexe
Tendances
Tendances (20)
Similaire à Architecture in Ajax Applications
Similaire à Architecture in Ajax Applications (20)
Plus de Alois Reitbauer
Plus de Alois Reitbauer (20)
Dernier
Dernier (20)
Architecture in Ajax Applications
- 1. Architectureof Ajax Applications Alois Reitbauer, dynaTrace Software
- 2. Intro
- 4. The Last 7 months
- 6. Whereisourcoderunning? past now Server Browser
- 9. MVC revisited View View Controller Controller Model Model Web 1.0 Web 2.0
- 10. MVC anddeployment View Controller Model Runtime (Dynamic) Load Time (Static)
- 11. Performance
- 12. Google includesspeed in ranking … Source: http://googlewebmastercentral.blogspot.com/2010/04/using-site-speed-in-web-search-ranking.html
- 13. Theimpactof performance … Source: Jake Brutlag and Eric Schuman at Velocity 2009 …on business
- 17. DOM
- 18. Network
- 19. Connectivity
- 22. The Browser
- 23. .html . .png .js .css .css Browser underthehood Daten JavaScriptEngine DOM Connection Pool Connection Mgr XHR Renderer
- 24. Network
- 25. HTTP isthelanguageofthe web … GET /index.html HTTP/1.1 Host: www.example.net HTTP/1.1 200 OK Content-Type: text/html …. Server Browser
- 27. Caching Support
- 28. Compression
- 30. State Tracking
- 37. Merge Resources
- 38. UseSpriting
- 39. Content Size increases Transfer/Wait Time
- 40. Minify Content
- 41. Compress Content
- 43. Caching in Web Applications Serverside Data Cache Server providingCaching Information Cache per Client Server Proxy Cache for Many Clients Clients
- 46. Expires
- 48. E-Tag
- 50. Cache-Control
- 52. Last-Modified
- 54. max-ageandExpires Browser Server GET … * Combine with E-Tag for evenmoreperformance max-age:10 Content Download Nodownload for 10 seconds
- 60. Session State
- 67. … but not always
- 68. DOM
- 69. The DOM isslow… … itisalwaystwocomponents youareworkingwith
- 71. Bad – verybad - idea
- 73. Fast, but not necesssarily fastest
- 75. Adequately fast
- 76. Reliably fast in all browsers
- 82. Cache values in variables
- 83. Emulated vs. Native lookups
- 84. E.g. getElementByClassName in IE <8
- 87. Your HTML decideshow fast youare <html> <head> <link rel=‘stylesheet‘ src=‘style.css‘> <scriptsrc=‘script1.js‘ defer></script> <script> // do somethingthat just blocksdownloads </script> </head> <body> Hello World! <scriptsrc=‘script2.js‘ defer></script> </body> </html>
- 88. Inline CSS - A real world sample * 9000 <td style="padding-left:10px; overflow: hidden; white-space: nowrap;"> = 2 MB
- 89. AJAX
- 91. Retrieve an type ofcontent
- 94. returns JSONP
- 98. JSON
- 100. JSONP
- 101. Whenusingscript tags
- 102. HTML
- 103. Directlyinsertable
- 104. Custom Format
- 108. Network Usage
- 110. Compression
- 112. HTML Structure
- 113. Selector Performance
- 114. UnwantedLayouting
- 116. alois.reitbauer@dynatrace.com Mail blog.dynatrace.com Blog AloisReitbauer Twitter http://ajax.dynatrace.com