nie mehr weltweites warten-jax2013-web - oio.de · • falscher gebrauch von composite components...
Post on 24-Jul-2018
248 Views
Preview:
TRANSCRIPT
26.04.2013
1
Orientation in Objects GmbH
Weinheimer Str. 6868309 Mannheim
www.oio.deinfo@oio.deVersion:
Nie mehr weltweites Warten
Performancetuning für JSF-Anwendungen
Nie mehr weltweites warten – JSF Performance-Tuning© 2013 Orientation in Objects GmbH
Ihr Sprecher
2
Thomas Asel
Trainer, Berater, Entwickler
SchwerpunkteFrontend-Architektur,
Entwicklung von Web-Anwendungen, Web-Performance-Optimierung
http://blog.oio.de@Tom_Asel
thomas.asel@oio.de
26.04.2013
2
Nie mehr weltweites warten – JSF Performance-Tuning© 2013 Orientation in Objects GmbH
Das war in der Schachtel …
3
Komponenten-Modell
Komponenten-Modell
Architektur-Modell
Architektur-Modell
Programmier-Modell
Programmier-Modell
Resource HandlingResource Handling
LifecycleLifecycle
… viele, viele, Bibliotheken… viele, viele, Bibliotheken
Nie mehr weltweites warten – JSF Performance-Tuning© 2013 Orientation in Objects GmbH
Fear, Uncertainty, Doubt
JSF ist doch …
4
oldschool
schwerfällig
schwierig
langsam
26.04.2013
3
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
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
26.04.2013
4
Nie mehr weltweites warten – JSF Performance-Tuning© 2013 Orientation in Objects GmbH
Welt-Weites-Warten
7
Browser Servlet-Container
GET /index.jsfJSF-Lifecycle
RestoreView
Render Response
GET stylesheet.css
GET script.js
GET logo.png
JSF Response Time
Resource Loading
"LA
TE
NZ
"
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
26.04.2013
5
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.jsfJSF-Lifecycle
RestoreView
Render Response
GET stylesheet.css
GET script.js
GET logo.png
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.jsfJSF-Lifecycle
RestoreView
Render Response
GET stylesheet.css
GET script.js
GET logo.png
26.04.2013
6
Nie mehr weltweites warten – JSF Performance-Tuning© 2013 Orientation in Objects GmbH
JSF - Komponentenbaum
11
UIViewRoot
HtmlForm
HtmlOutputText
HtmlInputText
HtmlOutcomeTargetLink
Nie mehr weltweites warten – JSF Performance-Tuning© 2013 Orientation in Objects GmbH 12
JSF
Lifecycle
ApplyRequest Values
Validation
Update Model
InvokeApplication
RenderResponse
RestoreView
26.04.2013
7
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
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
12
34
56
Dur
atio
n [m
s]
Phase
Quelle: http://bit.ly/myfaces-vs-mojarra
26.04.2013
8
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
% o
f Life
cycl
e D
urat
ion
Lifecycle Phase
RestoreView
ApplyRequestValues
Validation
UpdateModel
InvokeApplication
RenderResponse
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!
26.04.2013
9
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>
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
26.04.2013
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
19
Browser Servlet-Container
GET /index.jsfJSF-Lifecycle
RestoreView
Render Response
GET stylesheet.css
GET script.js
GET logo.png
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
26.04.2013
11
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
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
26.04.2013
12
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
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.jsfJSF-Lifecycle
RestoreView
Render Response
GET stylesheet.css
GET script.js
GET logo.png
26.04.2013
13
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>
Nie mehr weltweites warten – JSF Performance-Tuning© 2013 Orientation in Objects GmbH
Combined Resources
26
26.04.2013
14
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
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>
26.04.2013
15
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
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
26.04.2013
16
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
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
26.04.2013
17
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
Nie mehr weltweites warten – JSF Performance-Tuning© 2013 Orientation in Objects GmbH
Combined Resources : Problem
Lösung:Caching - Strategie
34
26.04.2013
18
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]
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
26.04.2013
19
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
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
26.04.2013
20
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"
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.jsfJSF-Lifecycle
RestoreView
Render Response
GET stylesheet.css
GET script.js
GET logo.png
26.04.2013
21
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
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
26.04.2013
22
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
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
26.04.2013
23
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.jsfJSF-Lifecycle
RestoreView
Render Response
GET stylesheet.css
GET script.js
GET logo.png
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
26.04.2013
24
Nie mehr weltweites warten – JSF Performance-Tuning© 2013 Orientation in Objects GmbH
CDN – Content Delivery Network
47
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 Kostenab 0,12 $ / GB und
Beispiel $0,0090 / 10.000 Requests
• CDN übernimmt– Auslieferung– Load-Balancing– Skalierung
48
26.04.2013
25
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">
Nie mehr weltweites warten – JSF Performance-Tuning© 2013 Orientation in Objects GmbH
JSF Resource Handler
50
26.04.2013
26
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
Nie mehr weltweites warten – JSF Performance-Tuning© 2013 Orientation in Objects GmbH
OmniFaces: CDNResourceHandler
52
from CDN
Packed
26.04.2013
27
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
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.jsfJSF-Lifecycle
RestoreView
Render Response
GET stylesheet.css
GET script.js
GET logo.png
26.04.2013
28
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
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.jsfJSF-Lifecycle
RestoreView
Render Response
GET stylesheet.css
GET script.js
GET logo.png
26.04.2013
29
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
Nie mehr weltweites warten – JSF Performance-Tuning© 2013 Orientation in Objects GmbH
Mehr von OIO zum Thema…
• Schulung: JavaServer Faces– http://www.oio.de/java-server-faces.htm
• Schulung: JSF Komponenten selbst entwickeln– http://www.oio.de/seminar/java/kurs-jsf-schulung-komponenten-java-
server-faces-seminar-entwicklung-components.htm
• Vergleichsstudie der Implementierungen Oracle Mojarra und Apache MyFaces– http://www.oio.de/public/java/studie-jsf-mojarra-myfaces-performance-
vergleich.htm
• Artikel: JSF Best Practices (englischer Artikel)– http://www.oio.de/public/java/jsf-best-practices-javaserver-faces-
session-tips.htm
58
top related