Nie mehr weltweites Warten-Jax2013-Web - oio.de · • Falscher Gebrauch von Composite Components – "Dead Code": ... • Custom-Tags

26.04.2013

1

Orientation in Objects GmbH

Weinheimer Str. 6868309 Mannheim

[email protected]:

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

[email protected]

26.04.2013

2


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


Fear, Uncertainty, Doubt

JSF ist doch …

4

oldschool

schwerfällig

schwierig

langsam

26.04.2013

3


Performance optimieren – Auf welcher Ebene?

JVM-Ebene

JSF-Ebene

Web-Ebene

• Heap-Size• Garbage

Collection

• Lifecycle• Komponenten

• Requests• Caching

5


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


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

"


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


Optimierungsmassnahmen – Easy Winner

• JSF Response Time– Kompontenbaum– Implementierungsunterschiede

• Resource-Loading– Combined Resources– Caching– Ressourcen auslagern– Komprimierung

9



RestoreView

Render Response

GET stylesheet.css

GET script.js

GET logo.png


Gliederung



10



RestoreView

Render Response

GET stylesheet.css

GET script.js

GET logo.png

26.04.2013

6


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


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

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


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


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


Brauchen wir dafür JSF – Komponenten?

17

<ol id="ordered_list" class="ui-datalist-data">

<li class="ui-datalist-item">

Chrysler, 1965

</li>

...

<ol>


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


Gliederung



19



RestoreView

Render Response

GET stylesheet.css

GET script.js

GET logo.png


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


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


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


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


Gliederung



24



RestoreView

Render Response

GET stylesheet.css

GET script.js

GET logo.png

26.04.2013

13


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>


Combined Resources

26

26.04.2013

14


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

28

<link rel="stylesheet" href="/myapp/resources/packed.css">

<script src="/myapp/resources/packed.js"></script>


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/jquery-

1.9.1.min.js.jsf?ln=js"></script>

26.04.2013

15


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

26.04.2013

16


view1.xhtml

scriptA.js(<1kB)

jQuery.js(~91 kB)

scriptC.js(<1kB)

Combined Resources: Problem

31

view2.xhtml


Combined Resources: Problem

Ungepackt:• Requests

– 9 of 12– 3 from Cache– 97,1 kB transferred

32

26.04.2013

17


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


Combined Resources : Problem

Lösung:Caching - Strategie

34

26.04.2013

18


Combined Resources – Ausnahmen

35

jQuery.js

a1.js a2.js

b1.js b2.js

view1.xhtml view2.xhtml

[from Cache]


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

26.04.2013

19


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:


<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


Combined Resources - Bibliotheken

39

ICEfaces 3.3"Resource Coalescing"

RichFaces 4"Resource Optimization"

Omnifaces "Combined ResourceHandler"


Gliederung



40



RestoreView

Render Response

GET stylesheet.css

GET script.js

GET logo.png

26.04.2013

21


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

26.04.2013

22


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

26.04.2013

23


Gliederung



45



RestoreView

Render Response

GET stylesheet.css

GET script.js

GET logo.png


Statische Ressourcen auslagern

46

Apache

httpd

http://www.oio.de http://static.oio.de

26.04.2013

24


CDN – Content Delivery Network

47


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


JSF und CDN

• Deployment– Extra-Step

• Maven• Ant• …

• JSF

49


href="/myapp/javax.faces.resource/styleA.css.jsf?ln=css">

<link rel="stylesheet" href="http://mycdn.com/oio/myapp/styleA.css">


JSF Resource Handler

50

26.04.2013

26


OmniFaces: CDNResourceHandler

• faces-config.xml:<application>

<resource-handler>

org.omnifaces.resourcehandler.CDNResourceHandler</resource-handler>

</application>


<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


OmniFaces: CDNResourceHandler

52

from CDN

Packed

26.04.2013

27


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



54



RestoreView

Render Response

GET stylesheet.css

GET script.js

GET logo.png

26.04.2013

28


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



56



RestoreView

Render Response

GET stylesheet.css

GET script.js

GET logo.png

26.04.2013

29


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-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

26.04.2013

30



[email protected]

??

? ?

????

Fragen ?



[email protected]

Vielen Dank für ihre Aufmerksamkeit !

Nie mehr weltweites Warten-Jax2013-Web - oio.de · • Falscher Gebrauch von Composite Components – "Dead Code": ... • Custom-Tags

Documents