Nie mehr weltweites Warten

Transcription

26.04.2013
Nie mehr weltweites
Warten
Performancetuning für JSF-Anwendungen
Orientation in Objects GmbH
Weinheimer Str. 68
68309 Mannheim
Version:
www.oio.de
[email protected]
Ihr Sprecher
Thomas Asel
Trainer, Berater, Entwickler
Schwerpunkte
Frontend-Architektur,
Entwicklung von Web-Anwendungen,
Web-Performance-Optimierung
http://blog.oio.de
@Tom_Asel
[email protected]
© 2013 Orientation in Objects GmbH
Nie mehr weltweites warten – JSF Performance-Tuning
2
1
26.04.2013
Das war in der Schachtel …
ArchitekturModell
KomponentenModell
Lifecycle
Resource
Handling
ProgrammierModell
… viele, viele,
Bibliotheken
3
4
Fear, Uncertainty, Doubt
JSF ist doch …
oldschool
schwerfällig
schwierig
langsam
2
26.04.2013
Performance optimieren – Auf welcher Ebene?
JVMEbene
JSF-Ebene
WebEbene
• Heap-Size
• Garbage
Collection
• Lifecycle
• Komponenten
• Requests
• Caching
5
Only 10%-20% of End-User
Response-Time is spent
donwloading the HTML
document.
Steve Souders
- Web-Performance Guru, Yahoo
6
3
26.04.2013
Welt-Weites-Warten
Servlet-Container
Browser
JSF-Lifecycle
GET /index.jsf
RestoreView
"LATENZ"
JSF Response
Time
Render Response
GET stylesheet.css
GET script.js
Resource
Loading
GET logo.png
7
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
4
26.04.2013
Optimierungsmassnahmen – Easy Winner
Servlet-Container
Browser
JSF-Lifecycle
GET /index.jsf
•
JSF Response Time
RestoreView
– Kompontenbaum
– Implementierungsunterschiede
Render Response
GET stylesheet.css
•
Resource-Loading
–
–
–
–
Combined Resources
Caching
Ressourcen auslagern
Komprimierung
GET script.js
GET logo.png
9
Gliederung
Servlet-Container
Browser
JSF-Lifecycle
GET /index.jsf
•
JSF Response Time
RestoreView
– Kompontenbaum
Render Response
GET stylesheet.css
•
Resource-Loading
–
–
–
–
Combined Resources
Caching
Komprimierung
GET script.js
GET logo.png
10
5
26.04.2013
JSF - Komponentenbaum
UIViewRoot
HtmlForm
HtmlOutputText
HtmlInputText
HtmlOutcomeTargetLink
11
Apply
Request
Values
Restore
View
Validation
JSF
Lifecycle
Render
Response
Update
Model
Invoke
Application
12
6
26.04.2013
JSF - Komponentenbaum
•
Wird im Lifecycle mehrfach traversiert
Besonders aufwendig:
•
Phase1:
– Erzeugung / Wiederherstellung
• Client-Side State-Saving: Deserialisierung
•
Phase 6:
– Rendering
13
Dauer der Lifecylce-Phasen - Vergleichsmessung
60
Duration [ms]
50
40
30
20
C=1000
10
C=500
C=250
0
1
2
C=100
3
C=10
4
5
6
Phase
Quelle: http://bit.ly/myfaces-vs-mojarra
14
7
26.04.2013
Dauer der Lifecylce-Phasen – Anteilig
50
45
Render
Response
% of Lifecycle Duration
40
35
30
Restore
View
25
20
Validation
15
10
Update
Model
Apply
Request
Values
5
Invoke
Application
0
0
1
2
3
4
5
6
7
Lifecycle Phase
15
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
54 Components!
– "Dead Code": rendered="false"
• Trotzdem Teil des Komponentenbaumes
– Komplexität
• z.B.: verschachtelte Tabbed Panes
16
8
26.04.2013
Brauchen wir dafür JSF – Komponenten?
<ol id="ordered_list" class="ui-datalist-data">
<li class="ui-datalist-item">
Chrysler, 1965
</li>
...
<ol>
17
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
9
26.04.2013
Gliederung
Servlet-Container
Browser
JSF-Lifecycle
GET /index.jsf
•
JSF Response Time
RestoreView
– Kompontenbaum
Render Response
GET stylesheet.css
•
Resource-Loading
–
–
–
–
Combined Resources
Caching
Komprimierung
GET script.js
GET logo.png
19
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
10
26.04.2013
Vergleich: MyFaces vs Mojarra
1000
900
800
700
[ms]
600
500
400
300
200
100
0
0
200
400
600
800
1000
1200
1400
# of Components in Tree
21
Vergleich: MyFaces vs Mojarra
1000
900
800
700
[ms]
600
500
400
300
200
100
0
0
200
400
600
800
1000
1200
1400
# of Components in Tree
22
11
26.04.2013
Fazit Vergleichsstudie
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
23
Gliederung
Servlet-Container
Browser
JSF-Lifecycle
GET /index.jsf
•
JSF Response Time
RestoreView
– Kompontenbaum
Render Response
GET stylesheet.css
•
Resource-Loading
–
–
–
–
Combined Resources
Caching
Komprimierung
GET script.js
GET logo.png
24
12
26.04.2013
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>
<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>
25
26
Combined Resources
13
26.04.2013
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
Combined Resources: Rendering
href="/myapp/javax.faces.resource/styleA.css.jsf?ln=css">
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/jquery1.9.1.min.js.jsf?ln=js"></script>
<link rel="stylesheet" href="/myapp/resources/packed.css">
<script src="/myapp/resources/packed.js"></script>
28
14
26.04.2013
JSF - Resource Handler
•
Verantwortlich für
De/Encoding von Resourcen
•
Liefert Ressource anhand
Library und Resourcename
•
Behandelt Resource Requests
29
OmniFaces - CombinedResourceHandler
faces-config.xml:
<application>
<resource-handler>
org.omnifaces.resourcehandler.CombinedResourceHandler
</resource-handler>
</application>
30
15
26.04.2013
Combined Resources: Problem
scriptA.js
(<1kB)
view1.xhtml
jQuery.js
(~91 kB)
view2.xhtml
scriptC.js
(<1kB)
31
32
Combined Resources: Problem
Ungepackt:
• Requests
– 9 of 12
– 3 from Cache
– 97,1 kB transferred
16
26.04.2013
Combined Resources : Problem
Ungepackt:
• Requests
– 9 of12
– 3 from Cache
Gepackt:
• Requests
– 6 of 6
– 0 from Cache
33
Combined Resources : Problem
Lösung:
Caching - Strategie
34
17
26.04.2013
Combined Resources – Ausnahmen
[from Cache]
jQuery.js
view1.xhtml
view2.xhtml
a1.js a2.js
b1.js b2.js
35
OmniFaces - CombinedResourceHandler
Ausschluß seitenweise konfigurieren:
view.xhtml:

<h:outputScript library="js" name="scriptB.js"
target="head" />
<h:outputScript library="js" name="scriptC.js"
target="head" />

<h:outputScript library="js" name="jquery-1.9.1.min.js"/>
36
18
26.04.2013
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
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
19
26.04.2013
Combined Resources - Bibliotheken
Omnifaces
"Combined ResourceHandler"
ICEfaces 3.3
"Resource Coalescing"
RichFaces 4
"Resource Optimization"
39
Gliederung
Servlet-Container
Browser
JSF-Lifecycle
GET /index.jsf
•
JSF Response Time
RestoreView
– Kompontenbaum
Render Response
GET stylesheet.css
•
Resource-Loading
–
–
–
–
Combined Resources
Caching
Komprimierung
GET script.js
GET logo.png
40
20
26.04.2013
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
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
21
26.04.2013
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
Response Header anpassen
•
Servlet-Filter
– geht immer, unabhängig von JSF
– Nachteil: Kein Zugriff auf FacesContext, Scopes, etc…
•
JSF:
44
22
26.04.2013
Gliederung
Servlet-Container
Browser
JSF-Lifecycle
GET /index.jsf
•
JSF Response Time
RestoreView
– Kompontenbaum
Render Response
GET stylesheet.css
•
Resource-Loading
–
–
–
–
Combined Resources
Caching
Komprimierung
GET script.js
GET logo.png
45
Statische Ressourcen auslagern
http://www.oio.de
http://static.oio.de
Apache
httpd
46
23
26.04.2013
CDN – Content Delivery Network
47
CDN - Vorteile
•
Transfer von statischen Ressourcen
– schont
• Application Server
• Unternehmensnetzwerk
– Erzeugt (vermutlich) geringere Kosten
Beispiel
•
ab 0,12 $ / GB und
$0,0090 / 10.000 Requests
CDN übernimmt
– Auslieferung
– Load-Balancing
– Skalierung
48
24
26.04.2013
JSF und CDN
•
Deployment
– Extra-Step
• Maven
• Ant
• …
•
JSF
href="/myapp/javax.faces.resource/styleA.css.jsf?ln=css">
<link rel="stylesheet" href="http://mycdn.com/oio/myapp/styleA.css">
49
50
JSF Resource Handler
25
26.04.2013
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
OmniFaces: CDNResourceHandler
from CDN
Packed
26
26.04.2013
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
Gliederung
Servlet-Container
Browser
JSF-Lifecycle
GET /index.jsf
•
JSF Response Time
RestoreView
– Kompontenbaum
Render Response
GET stylesheet.css
•
Resource-Loading
–
–
–
–
Combined Resources
Caching
Komprimierung
GET script.js
GET logo.png
54
27
26.04.2013
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
Zusammenfassung
Servlet-Container
Browser
JSF-Lifecycle
GET /index.jsf
•
JSF Response Time
RestoreView
– Kompontenbaum
Render Response
GET stylesheet.css
•
Resource-Loading
–
–
–
–
Combined Resources
Caching
Komprimierung
GET script.js
GET logo.png
56
28
26.04.2013
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
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-javaserver-faces-seminar-entwicklung-components.htm
•
Vergleichsstudie der Implementierungen Oracle Mojarra und Apache
MyFaces
– http://www.oio.de/public/java/studie-jsf-mojarra-myfaces-performancevergleich.htm
•
Artikel: JSF Best Practices (englischer Artikel)
– http://www.oio.de/public/java/jsf-best-practices-javaserver-facessession-tips.htm
58
29
26.04.2013
? ?
?
? ?
? ?
?
Fragen ?
Weinheimer Str. 68
68309 Mannheim
www.oio.de
[email protected]
Vielen Dank für ihre
Aufmerksamkeit !
Weinheimer Str. 68
68309 Mannheim
www.oio.de
[email protected]
30

Nie mehr weltweites Warten

Transcription

Similar documents

Nie mehr weltweites Warten

Java Server Faces

Technische Spezifikationen der Deutschen Bundesbank für die

Feedbackbogen Schüler – Lehrer 1. Unterricht und Prüfungen ++ +