Nie mehr weltweites Warten - Performancetuning für JSF-Anwendungen

German slides for my talk at JAX 2013

Transcript

1. Orientation in Objects GmbH Weinheimer Str. 68 68309 Mannheim www.oio.de info@oio.de Version: Nie mehr weltweites Warten Performancetuning für JSF-Anwendungen
2. Nie mehr weltweites warten – JSF Performance-Tuning © 2013 Orientation in Objects GmbH Ihr Sprecher 2 Thomas Asel Trainer, Berater, Entwickler Schwerpunkte Frontend-Architektur, Entwicklung von Web-Anwendungen, Web-Performance-Optimierung http://blog.oio.de @Tom_Asel thomas.asel@oio.de
3. Nie mehr weltweites warten – JSF Performance-Tuning © 2013 Orientation in Objects GmbH Das war in der Schachtel … 3 Komponenten- Modell Architektur- Modell Programmier- Modell Resource Handling Lifecycle … viele, viele, Bibliotheken
4. Nie mehr weltweites warten – JSF Performance-Tuning © 2013 Orientation in Objects GmbH Fear, Uncertainty, Doubt JSF ist doch … 4 oldschool schwerfällig schwierig langsam
5. Nie mehr weltweites warten – JSF Performance-Tuning © 2013 Orientation in Objects GmbH Performance optimieren – Auf welcher Ebene? JVM- Ebene JSF-Ebene Web- Ebene • Heap-Size • Garbage Collection • Lifecycle • Komponenten • Requests • Caching 5
6. Nie mehr weltweites warten – JSF Performance-Tuning © 2013 Orientation in Objects GmbH Only 10%-20% of End-User Response-Time is spent donwloading the HTML document. 6 Steve Souders - Web-Performance Guru, Yahoo
7. Nie mehr weltweites warten – JSF Performance-Tuning © 2013 Orientation in Objects GmbH Welt-Weites-Warten 7 Browser Servlet-Container GET /index.jsf JSF-Lifecycle RestoreView Render Response GET stylesheet.css GET script.js GET logo.png JSF Response Time Resource Loading "LATENZ"
8. Nie mehr weltweites warten – JSF Performance-Tuning © 2013 Orientation in Objects GmbH Optimierungsmassnahmen - Anforderungen • Postiver Effekt auf – JSF Response Time – Resource Loading – Netzwerk Latenzen • Geringe Auswirkungen auf – Anwendungs-Architektur – Programmiermodell – Deployment • Tooling: – Integration in bestehenden Toolstack – (JSF) – Bordmittel 8
9. Nie mehr weltweites warten – JSF Performance-Tuning © 2013 Orientation in Objects GmbH Optimierungsmassnahmen – Easy Winner • JSF Response Time – Kompontenbaum – Implementierungsunterschiede • Resource-Loading – Combined Resources – Caching – Ressourcen auslagern – Komprimierung 9 Browser Servlet-Container GET /index.jsf JSF-Lifecycle RestoreView Render Response GET stylesheet.css GET script.js GET logo.png
10. Nie mehr weltweites warten – JSF Performance-Tuning © 2013 Orientation in Objects GmbH Gliederung • JSF Response Time – Kompontenbaum – Implementierungsunterschiede • Resource-Loading – Combined Resources – Caching – Ressourcen auslagern – Komprimierung 10 Browser Servlet-Container GET /index.jsf JSF-Lifecycle RestoreView Render Response GET stylesheet.css GET script.js GET logo.png
11. Nie mehr weltweites warten – JSF Performance-Tuning © 2013 Orientation in Objects GmbH JSF - Komponentenbaum 11 UIViewRoot HtmlForm HtmlOutputText HtmlInputText HtmlOutcomeTargetLink
12. Nie mehr weltweites warten – JSF Performance-Tuning © 2013 Orientation in Objects GmbH 12 JSF Lifecycle Apply Request Values Validation Update Model Invoke Application Render Response Restore View
13. Nie mehr weltweites warten – JSF Performance-Tuning © 2013 Orientation in Objects GmbH JSF - Komponentenbaum • Wird im Lifecycle mehrfach traversiert Besonders aufwendig: • Phase1: – Erzeugung / Wiederherstellung • Client-Side State-Saving: Deserialisierung • Phase 6: – Rendering 13
14. Nie mehr weltweites warten – JSF Performance-Tuning © 2013 Orientation in Objects GmbH Dauer der Lifecylce-Phasen - Vergleichsmessung 14 C=10 C=100 C=250 C=500 C=1000 0 10 20 30 40 50 60 1 2 3 4 5 6 Duration [ms] Phase Quelle: http://bit.ly/myfaces-vs-mojarra
15. Nie mehr weltweites warten – JSF Performance-Tuning © 2013 Orientation in Objects GmbH Dauer der Lifecylce-Phasen – Anteilig 15 0 5 10 15 20 25 30 35 40 45 50 0 1 2 3 4 5 6 7 % of Lifecycle Duration Lifecycle Phase Restore View Apply Request Values Validation Update Model Invoke Application Render Response
16. Nie mehr weltweites warten – JSF Performance-Tuning © 2013 Orientation in Objects GmbH Anzahl Components / View • Beobachtet: – < 50 eher selten – Mittelwert ca. 250 – Ausnahmefälle > 3000 • Ursache: – Unnötiger Gebrauch von JSF-Komponenten • Falscher Gebrauch von Composite Components – "Dead Code": rendered="false" • Trotzdem Teil des Komponentenbaumes – Komplexität • z.B.: verschachtelte Tabbed Panes 16 54 Components!
17. Nie mehr weltweites warten – JSF Performance-Tuning © 2013 Orientation in Objects GmbH Brauchen wir dafür JSF – Komponenten? 17 <ol id="ordered_list" class="ui-datalist-data"> <li class="ui-datalist-item"> Chrysler, 1965 </li> ... <ol>
18. Nie mehr weltweites warten – JSF Performance-Tuning © 2013 Orientation in Objects GmbH Lösung: Es müssen nicht immer Composites sein … • Custom-Tags <my:spacer height="100" /> • Decorator <my:infoBox type="warning" > <h:message for="selection" /> </my:infoBox> • Includes <ui:include src="footer.xhtml" /> • Composite-Components <my:orderForm value="#{order}" showAll="true"> <f:validateRequired for="address" /> </my:orderForm> 18
19. Nie mehr weltweites warten – JSF Performance-Tuning © 2013 Orientation in Objects GmbH Gliederung • JSF Response Time – Kompontenbaum – Implementierungsunterschiede • Resource-Loading – Combined Resources – Caching – Ressourcen auslagern – Komprimierung 19 Browser Servlet-Container GET /index.jsf JSF-Lifecycle RestoreView Render Response GET stylesheet.css GET script.js GET logo.png
20. Nie mehr weltweites warten – JSF Performance-Tuning © 2013 Orientation in Objects GmbH JSF - Implementierungen • 2 Implementierungen: – Oracle Mojarra (Referenzimplementierung) – Apache MyFaces  Prinzipiell Austauschbar • Servlet-Container: – Implementierung typischerweise Teil der Anwendung  Freie Wahl der Implementierung • Java EE - Application-Server: "Full-Stack-Falle" – Implementierung zwingend Teil des Auslieferumfangs – Dadurch Festlegung auf – Implementierung – Version – Änderung der JSF-Implementierung möglich • Konfiguration notwendig • Ggf. Auswirkung auf Garantie/Support 20
21. Nie mehr weltweites warten – JSF Performance-Tuning © 2013 Orientation in Objects GmbH Vergleich: MyFaces vs Mojarra 21 0 100 200 300 400 500 600 700 800 900 1000 0 200 400 600 800 1000 1200 1400 [ms] # of Components in Tree
22. Nie mehr weltweites warten – JSF Performance-Tuning © 2013 Orientation in Objects GmbH Vergleich: MyFaces vs Mojarra 22 0 100 200 300 400 500 600 700 800 900 1000 0 200 400 600 800 1000 1200 1400 [ms] # of Components in Tree
23. Nie mehr weltweites warten – JSF Performance-Tuning © 2013 Orientation in Objects GmbH Fazit Vergleichsstudie 23 1. Größe des Komponentenbaum hat direkten Einfluss auf Performance 2. MyFaces durchläuft den Lifecycle schneller als Mojarra 3. Anwendungen mit großen Komponentenbäumen profitieren von einem Umstieg auf MyFaces  bit.ly/myfaces-vs-mojarra
24. Nie mehr weltweites warten – JSF Performance-Tuning © 2013 Orientation in Objects GmbH Gliederung • JSF Response Time – Kompontenbaum – Implementierungsunterschiede • Resource-Loading – Combined Resources – Caching – Ressourcen auslagern – Komprimierung 24 Browser Servlet-Container GET /index.jsf JSF-Lifecycle RestoreView Render Response GET stylesheet.css GET script.js GET logo.png
25. Nie mehr weltweites warten – JSF Performance-Tuning © 2013 Orientation in Objects GmbH JSF - Resource Handling • Organisation in WebContent/resources: • Rendering: • Deklaration: <h:head> <h:outputStylesheet library="css" name="styleB.css" /> <h:outputScript library="js" name="scriptC.js" target="head" /> </h:head> 25 <link rel="stylesheet" href="/myapp/javax.faces.resource/styleB.css.jsf?ln=css"> <script src="/myapp/javax.faces.resource/scriptC.js.jsf?ln=js"> </script>
26. Nie mehr weltweites warten – JSF Performance-Tuning © 2013 Orientation in Objects GmbH Combined Resources 26
27. Nie mehr weltweites warten – JSF Performance-Tuning © 2013 Orientation in Objects GmbH Combined Resources: Anforderungen • Umsetzungsvarianten  Build-Prozess/Deployment • Maven • Ant • Jawr – JSF • Eigenimplementierung / Erweiterung • Bibliothek • Programmiermodell: – Ressourcen zur Entwicklungszeit nicht kombinieren  Staging-Konzept berücksichtigen • Rendering: – Nur ein Verweis pro Typ – Gerenderte Links müssen kombinierte Ressource referenzieren 27
28. Nie mehr weltweites warten – JSF Performance-Tuning © 2013 Orientation in Objects GmbH Combined Resources: Rendering 28 <link rel="stylesheet" href="/myapp/resources/packed.css"> <script src="/myapp/resources/packed.js"></script> <link rel="stylesheet" href="/myapp/javax.faces.resource/styleA.css.jsf?ln=css"> <link rel="stylesheet" href="/myapp/javax.faces.resource/styleB.css.jsf?ln=css"> <script src="/myapp/javax.faces.resource/scriptA.js.jsf?ln=js"></script> <script src="/myapp/javax.faces.resource/scriptB.js.jsf?ln=js"></script> <script src="/myapp/javax.faces.resource/jquery- 1.9.1.min.js.jsf?ln=js"></script>
29. Nie mehr weltweites warten – JSF Performance-Tuning © 2013 Orientation in Objects GmbH JSF - Resource Handler • Verantwortlich für De/Encoding von Resourcen • Liefert Ressource anhand Library und Resourcename • Behandelt Resource Requests 29
30. Nie mehr weltweites warten – JSF Performance-Tuning © 2013 Orientation in Objects GmbH OmniFaces - CombinedResourceHandler faces-config.xml: <application> <resource-handler> org.omnifaces.resourcehandler.CombinedResourceHandler </resource-handler> </application> 30
31. Nie mehr weltweites warten – JSF Performance-Tuning © 2013 Orientation in Objects GmbH view1.xhtml scriptA.js (<1kB) jQuery.js (~91 kB) scriptC.js (<1kB) Combined Resources: Problem 31 view2.xhtml
32. Nie mehr weltweites warten – JSF Performance-Tuning © 2013 Orientation in Objects GmbH Combined Resources: Problem Ungepackt: • Requests – 9 of 12 – 3 from Cache – 97,1 kB transferred 32
33. Nie mehr weltweites warten – JSF Performance-Tuning © 2013 Orientation in Objects GmbH Combined Resources : Problem Ungepackt: • Requests – 9 of12 – 3 from Cache – 97,1 kB transferred Gepackt: • Requests – 6 of 6 – 0 from Cache – 186,9 kB transferred 33
34. Nie mehr weltweites warten – JSF Performance-Tuning © 2013 Orientation in Objects GmbH Combined Resources : Problem Lösung: Caching - Strategie 34
35. Nie mehr weltweites warten – JSF Performance-Tuning © 2013 Orientation in Objects GmbH Combined Resources – Ausnahmen 35 jQuery.js a1.js a2.js b1.js b2.js view1.xhtml view2.xhtml [from Cache]
36. Nie mehr weltweites warten – JSF Performance-Tuning © 2013 Orientation in Objects GmbH OmniFaces - CombinedResourceHandler Ausschluß seitenweise konfigurieren: view.xhtml: <!-- Packed Ressources --> <h:outputScript library="js" name="scriptB.js" target="head" /> <h:outputScript library="js" name="scriptC.js" target="head" /> <!-- Excluded from packing --> <h:outputScript library="js" name="jquery-1.9.1.min.js"/> 36
37. Nie mehr weltweites warten – JSF Performance-Tuning © 2013 Orientation in Objects GmbH OmniFaces: CombinedResourceHandler Ausschluß global konfigurieren: • web.xml: <context-param> <param-name> org.omnifaces.COMBINED_RESOURCE_HANDLER_EXCLUDED_RESOURCES </param-name> <param-value> javax.faces:jsf.js </param-value> </context-param> 37
38. Nie mehr weltweites warten – JSF Performance-Tuning © 2013 Orientation in Objects GmbH OmniFaces: CombinedResourceHandler Auslieferung vollständig unterdrücken: • web.xml: <context-param> <param-name> org.omnifaces.COMBINED_RESOURCE_HANDLER_SUPPRESSED_RESOURCES </param-name> <param-value> primefaces:primefaces.css </param-value> </context-param> 38
39. Nie mehr weltweites warten – JSF Performance-Tuning © 2013 Orientation in Objects GmbH Combined Resources - Bibliotheken 39 ICEfaces 3.3 "Resource Coalescing" RichFaces 4 "Resource Optimization" Omnifaces "Combined ResourceHandler"
40. Nie mehr weltweites warten – JSF Performance-Tuning © 2013 Orientation in Objects GmbH Gliederung • JSF Response Time – Kompontenbaum – Implementierungsunterschiede • Resource-Loading – Combined Resources – Caching – Ressourcen auslagern – Komprimierung 40 Browser Servlet-Container GET /index.jsf JSF-Lifecycle RestoreView Render Response GET stylesheet.css GET script.js GET logo.png
41. Nie mehr weltweites warten – JSF Performance-Tuning © 2013 Orientation in Objects GmbH Standardverhalten: Caching- Response Header • Production-Stage: HTTP/1.1 200 OK Server: Apache-Coyote/1.1 Expires: Thu, 11 Apr 2013 13:51:12 GMT Last-Modified: Wed, 03 Apr 2013 08:52:01 GMT Content-Type: application/javascript Content-Length: 176 Date: Thu, 04 Apr 2013 13:51:12 GMT 41
42. Nie mehr weltweites warten – JSF Performance-Tuning © 2013 Orientation in Objects GmbH Expires Header "The Expires entity-header field gives the date/time after which the response is considered stale." RFC 2616 - Hypertext Transfer Protocol -- HTTP/1.1 • Wird von JSF automatisch gesetzt – Production-Stage: 7 Tage – Development-Stage: 0 • Probleme: – Zu kurzer Zeitraum: • Ressource wird redundant ausgeliefert – Zu langer Zeitraum • Client verpasst Update 42
43. Nie mehr weltweites warten – JSF Performance-Tuning © 2013 Orientation in Objects GmbH Idee: Expires: Fri, 01 Jan 2100 12:00:00 GMT • JSF Resourcehandling unterstützt Versionierung • Version mit jedem Deployment erhöhen • JSF verwendet standardmässig höchste Version • Angabe von niedriger Version möglich, aber… <h:outputScript library="js" name="1_0/scriptA.js" target="head" /> – Mojarra: erlaubt – MyFaces: Warnung: Resource referenced by resourceName 1_0/scriptA.js and libraryName js not found in call to ResourceHandler.createResource. It will be silenty ignored. 43
44. Nie mehr weltweites warten – JSF Performance-Tuning © 2013 Orientation in Objects GmbH Response Header anpassen • Servlet-Filter – geht immer, unabhängig von JSF – Nachteil: Kein Zugriff auf FacesContext, Scopes, etc… • JSF: 44
45. Nie mehr weltweites warten – JSF Performance-Tuning © 2013 Orientation in Objects GmbH Gliederung • JSF Response Time – Kompontenbaum – Implementierungsunterschiede • Resource-Loading – Combined Resources – Caching – Ressourcen auslagern – Komprimierung 45 Browser Servlet-Container GET /index.jsf JSF-Lifecycle RestoreView Render Response GET stylesheet.css GET script.js GET logo.png
46. Nie mehr weltweites warten – JSF Performance-Tuning © 2013 Orientation in Objects GmbH Statische Ressourcen auslagern 46 Apache httpd http://www.oio.de http://static.oio.de
47. Nie mehr weltweites warten – JSF Performance-Tuning © 2013 Orientation in Objects GmbH CDN – Content Delivery Network 47
48. Nie mehr weltweites warten – JSF Performance-Tuning © 2013 Orientation in Objects GmbH CDN - Vorteile • Transfer von statischen Ressourcen – schont • Application Server • Unternehmensnetzwerk – Erzeugt (vermutlich) geringere Kosten ab 0,12 $ / GB und Beispiel $0,0090 / 10.000 Requests • CDN übernimmt – Auslieferung – Load-Balancing – Skalierung 48
49. Nie mehr weltweites warten – JSF Performance-Tuning © 2013 Orientation in Objects GmbH JSF und CDN • Deployment – Extra-Step • Maven • Ant • … • JSF 49 <link rel="stylesheet" href="/myapp/javax.faces.resource/styleA.css.jsf?ln=css"> <link rel="stylesheet" href="http://mycdn.com/oio/myapp/styleA.css">
50. Nie mehr weltweites warten – JSF Performance-Tuning © 2013 Orientation in Objects GmbH JSF Resource Handler 50
51. Nie mehr weltweites warten – JSF Performance-Tuning © 2013 Orientation in Objects GmbH OmniFaces: CDNResourceHandler • faces-config.xml: <application> <resource-handler> org.omnifaces.resourcehandler.CDNResourceHandler </resource-handler> </application> • web.xml: <context-param> <param-name> org.omnifaces.CDN_RESOURCE_HANDLER_URLS </param-name> <param-value> js:jquery.js=http://code.jquery.com/jquery.js </param-value> </context-param> 51
52. Nie mehr weltweites warten – JSF Performance-Tuning © 2013 Orientation in Objects GmbH OmniFaces: CDNResourceHandler 52 from CDN Packed
53. Nie mehr weltweites warten – JSF Performance-Tuning © 2013 Orientation in Objects GmbH CDN und Caching • Response Header: Access-Control-Allow-Origin:* Content-Encoding:gzip Content-Length:32819 Content-Type:application/x-javascript; charset=utf-8 Date:Fri, 05 Apr 2013 14:02:24 GMT Cache-Control:max-age=2592000 Expires:Sun, 05 May 2013 14:02:24 GMT Last-Modified:Tue, 05 Feb 2013 00:56:40 GMT Vary:Accept-Encoding X-Cache:HIT Server:ECS (fcn/41B6) 53
54. Nie mehr weltweites warten – JSF Performance-Tuning © 2013 Orientation in Objects GmbH Gliederung • JSF Response Time – Kompontenbaum – Implementierungsunterschiede • Resource-Loading – Combined Resources – Caching – Ressourcen auslagern – Komprimierung 54 Browser Servlet-Container GET /index.jsf JSF-Lifecycle RestoreView Render Response GET stylesheet.css GET script.js GET logo.png
55. Nie mehr weltweites warten – JSF Performance-Tuning © 2013 Orientation in Objects GmbH Konfiguration - Tomcat • Server.xml <Connector port="8080" protocol="HTTP/1.1" connectionTimeout="20000" redirectPort="8443" compression="on" compressionMinSize="1024" compressableMimeType="text/css,application/javascript" /> 55
56. Nie mehr weltweites warten – JSF Performance-Tuning © 2013 Orientation in Objects GmbH Zusammenfassung • JSF Response Time – Kompontenbaum – Implementierungsunterschiede • Resource-Loading – Combined Resources – Caching – Ressourcen auslagern – Komprimierung 56 Browser Servlet-Container GET /index.jsf JSF-Lifecycle RestoreView Render Response GET stylesheet.css GET script.js GET logo.png
57. Nie mehr weltweites warten – JSF Performance-Tuning © 2013 Orientation in Objects GmbH Fazit • Einfluss auf JSF-Performance: – Größe des Komponentenbaumes – Wahl der Implementierung • # Requests statischer Resourcen verringern: – Combined Resources – Resource Caching – Auslagern (CDN / dedicated Webserver) • Netzwerk-Latenz verringern: – GZip Kompression nutzen • Der Browser kann das schon lange …  Alle vorgestellten Massnahmen lassen sich mit JSF umsetzen • Es existieren außerdem hilfreiche Bibliotheken 57
58. Orientation in Objects GmbH Weinheimer Str. 68 68309 Mannheim www.oio.de info@oio.de ? ? ? ? ? Fragen ?
59. Orientation in Objects GmbH Weinheimer Str. 68 68309 Mannheim www.oio.de info@oio.de Vielen Dank für ihre Aufmerksamkeit !