Nie mehr weltweites Warten

Transcription

22.04.2013
Nie mehr weltweites
Warten
Performancetuning für JSF-Anwendungen
Orientation in Objects GmbH
Weinheimer Str. 68
68309 Mannheim
Version:
www.oio.de
info@oio.de
Ihr Sprecher
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
© 2013 Orientation in Objects GmbH
Nie mehr weltweites warten – JSF Performance-Tuning
2
1
22.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
22.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
22.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
Worauf haben wir Einfluss?
• # Resource Requests
• JSF-Response-Time
• Peering-Point-Distanz
• ISP
• User-Bandwith-Speed
8
4
22.04.2013
Optimierungspunkte – Easy Winner
Performance Optimierung
WebSpezifisch
JSF-Spezifisch
Component
Tree
optimieren
Lifecycle
Duration
reduzieren
# Requests
reduzieren
Größe
in kb
reduzieren
9
Welt-Weites-Warten
Servlet-Container
Browser
JSF-Lifecycle
GET /index.jsf
RestoreView
JSF Response
Time
Render Response
GET stylesheet.css
GET script.js
GET logo.png
10
5
22.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
22.04.2013
JSF - Komponentenbaum
•
Wird im Lifecycle-Phase 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
22.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. 200
– Ausnahmefälle bis 3000
•
Ursache:
– Falscher Gebrauch von Composite Components
– "Dead Code": rendered="false"
54 Components!
• Trotzdem Teil des Komponentenbaumes
– Komplexität
• z.B.: verschachtelte Tabbed Panes
16
8
22.04.2013
JSF – Wiederverwendbare Einheiten
•
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>
17
Brauchen wir dafür JSF – Komponenten?
<ol id="ordered_list" class="ui-datalist-data">
<li class="ui-datalist-item">
Chrysler, 1965
</li>
...
<ol>
18
9
22.04.2013
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
19
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
20
10
22.04.2013
1000
900
800
700
[ms]
600
500
400
300
200
100
0
0
200
400
600
800
1000
1200
1400
21
Fazit Vergleichsstudie
•
Die Anzahl der verwendeten JSF-Komponenten auf einer Seite hat
direkte Auswirkungen auf die Performance der Anwendung. Dies
äußert sich hinsichtlich der Abarbeitungsdauer des Lifecycle.
•
Apache MyFaces durchläuft den JSF-Lifecycle erheblich schneller
als Oracle Mojarra. Insbesondere Anwendungen mit großen
Komponentenbäumen würden somit von einem Umstieg von
Mojarra auf MyFaces profitieren.
•
Apache MyFaces bietet unter Berücksichtigung aller untersuchten
Aspekte ein gleichwertiges oder besseres Verhalten als die
Referenzimplementierung Oracle Mojarra.
•
Durch den beobachteten linearen Anstieg der Abarbeitungsdauer
des JSF-Lifecycles ermöglicht MyFaces eine verlässlichere
Skalierung der zu erwartenden Laufzeiten.
22
11
22.04.2013
Fazit Vergleichsstudie
•
Die Anzahl der verwendeten JSF-Komponenten auf einer Seite hat
direkte Auswirkungen auf die Performance der Anwendung. Dies
äußert sich hinsichtlich der Abarbeitungsdauer des Lifecycle.
•
Apache MyFaces durchläuft den JSF-Lifecycle erheblich schneller
als Oracle Mojarra. Insbesondere Anwendungen mit großen
Komponentenbäumen würden somit von einem Umstieg von
Mojarra auf MyFaces profitieren.
•
Apache MyFaces bietet unter Berücksichtigung aller untersuchten
Aspekte ein gleichwertiges oder besseres Verhalten als die
Referenzimplementierung Oracle Mojarra.
•
Durch den beobachteten linearen Anstieg der Abarbeitungsdauer
des JSF-Lifecycles ermöglicht MyFaces eine verlässlichere
Skalierung der zu erwartenden Laufzeiten.
23
bit.ly/myfaces-vs-mojarra
24
12
22.04.2013
Welt-Weites-Warten
Servlet-Container
Browser
JSF-Lifecycle
GET /index.jsf
RestoreView
Render Response
GET stylesheet.css
Resource
Loading:
Packing
GET script.js
GET logo.png
25
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>
26
13
22.04.2013
Resource Packing
Aggregation
Resource
Packing
Minification
27
Resource-Packing: Massnahmen
•
Umsetzung:
– Build-Prozess
• Maven
• Ant
• …
– Framework
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>
• Jawr
•
Problem:
Links im gerenderten
Dokument müssen auf
andere Quelle verweisen
<link rel="stylesheet" href="/myapp/resources/packed.css">
<script src="/myapp/resources/packed.js"></script>
28
14
22.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
22.04.2013
Resource Packing: Problem
scriptA.js
(<1kB)
view1.xhtml
jQuery.js
(~91 kB)
view2.xhtml
scriptC.js
(<1kB)
31
32
Ungepackt:
• Requests
– 9 of 12
– 3 from Cache
– 97,1 kB transferred
16
22.04.2013
Ungepackt:
• Requests
– 9 of12
– 3 from Cache
Gepackt:
• Requests
– 6 of 6
– 0 from Cache
33
Lösung:
Caching - Strategie
34
17
22.04.2013
Resource Packing – Caching Strategie
[from Cache]
jQuery.js
view1.xhtml
view2.xhtml
a1.js a2.js
b1.js b2.js
35
OmniFaces - CombinedResourceHandler
Ressourcen vom Packing ausschliessen:
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
22.04.2013
OmniFaces: CombinedResourceHandler
Ressourcen vom Packing ausschliessen:
•
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
Ressourcen 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
22.04.2013
Welt-Weites-Warten
Servlet-Container
Browser
JSF-Lifecycle
GET /index.jsf
RestoreView
Render Response
GET stylesheet.css
Resource
Loading:
Caching
GET script.js
GET logo.png
39
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
40
20
22.04.2013
JSF - Resource Handling
•
JSF Resourcehandling unterstützt Versionierung
•
Standardmässig wird Ressource
mit höchster Versionsnummer ausgeliefert
•
Angabe von 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.
41
42
Response Header anpassen
•
Servlet-Filter
– geht immer, unabhängig von JSF
•
JSF:
21
22.04.2013
Welt-Weites-Warten
Servlet-Container
Browser
JSF-Lifecycle
GET /index.jsf
RestoreView
Render Response
GET stylesheet.css
Resource
Loading:
Auslagern
GET script.js
GET logo.png
43
Statische Ressourcen auslagern
http://www.oio.de
http://static.oio.de
Apache
httpd
44
22
22.04.2013
CDN – Content Delivery Network
45
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
– Caching
– Load-Balancing
– Skalierung
46
23
22.04.2013
JSF und CDN
•
Deployment
– Extra-Step
• Maven
• Ant
• …
•
JSF
<link rel="stylesheet" href="/myapp/javax.faces.resource/styleA.css.jsf?ln=css">
<link rel="stylesheet" href="http://mycdn.com/oio/myapp/styleA.css">
47
48
JSF Resource Handler
24
22.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>
49
50
OmniFaces: CDNResourceHandler
from CDN
Packed
25
22.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)
51
Welt-Weites-Warten
Servlet-Container
Browser
JSF-Lifecycle
GET /index.jsf
RestoreView
Render Response
GET stylesheet.css
Resource
Loading:
GZip
GET script.js
GET logo.png
52
26
22.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"
/>
53
Welt-Weites-Warten
Servlet-Container
Browser
JSF-Lifecycle
GET /index.jsf
RestoreView
JSF Response
Time
Render Response
GET stylesheet.css
GET script.js
Resource
Loading
GET logo.png
54
27
22.04.2013
Fazit
•
Einfluss auf JSF-Performance:
– Größe des Komponentenbaumes
– Wahl der Implementierung
•
# Requests statischer Resourcen verringern:
– Resource Packing
– Resource Caching
– Auslagern (CDN / dedicated Webserver)
•
Netzwerk-Latenz verringern:
– GZip Kompression nutzen
• Der Browser kann das schon lange …
→ Alle Massnahmen lassen sich mit JSF leicht umsetzen
• Es existieren außerdem hilfreiche Bibliotheken
55
? ?
?
?
?
? ?
?
Fragen ?
Weinheimer Str. 68
68309 Mannheim
www.oio.de
info@oio.de
28
22.04.2013
Folien zum Vortrag
•
Die Folien werden auf unserer Website veröffentlicht
– http://oio.de/tiny/orientierungspunkt-archiv
57
Kommende Orientierungspunkte
•
JBoss 7 als Plattform für hochverfügbare Anwendungen
– Freitag, 24. Mai 2013 - 17:00-18:00 Uhr
•
Über den Tellerrand: Überblick JSF-Bibliotheken und Tools für den
praktischen Einsatz
– Freitag, 28. Juni 2013 - 16:00-17:00 Uhr
29
22.04.2013
Vielen Dank für ihre
Aufmerksamkeit !
Weinheimer Str. 68
68309 Mannheim
www.oio.de
info@oio.de
2.2 sec speedup auf Startseite:
+15.4% mehr downloads
(= 60 Mill. Downloads / Jahr)
Mozilla
13-25% speedup (GZip):
-50% Outbound traffic
Netflix
60
30
22.04.2013
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
61
JSF Resource Handling
•
Standardmässig wird Ressource
mit höchster Versionsnummer ausgeliefert
•
Versionierung 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.
62
31
22.04.2013
Performance-Studien
•
World-Wide-Wait, Devoxx 2011
– Todo
•
Vergleichsstudie der JSF-Implementierungen Oracle Mojarra und
Apache MyFaces, OiO 2013
– Todo
Vergleichsstudie der JSFImplementierungen Oracle Mojarra und
Apache MyFaces
63
Optimierungspunkte – Easy Winner
64
32
22.04.2013
9,6 %
65
REST!!!
9,6 %
66
33
22.04.2013
Render
Response
Restore
View
Invoke
Application
Validation
Apply
Request
Values
Update
Model
67
68
Resources
Document
34
22.04.2013
Resources
Response Time
69
Network Latency
70
35
22.04.2013
1000
900
800
700
[ms]
600
MyFaces Server Side
500
MyFaces Client Side
Mojarra Server Side
400
Mojarra Client Side
300
200
100
0
0
200
400
600
800
1000
1200
1400
71
36

Nie mehr weltweites Warten

Transcription

Similar documents

Nie mehr weltweites Warten

Optimierung der Rechenleistung pro Fläche von

TEAMWORKNET Installation