Special Day HTML5 Cross-Plattform

Aber schnell! Performanceaspekte in Cross-Plattform-HTML5-AnwendungenGregor Biswanger | CEO von CleverSocial.de, Freier Dozent, Berater, Trainer und Autorabout.me/gregor.biswanger

1

Bitte warten Sprecher wird geladen

2

ber michGrnder von CleverSocial.deFreier Dozent, Berater und TrainerSchwerpunkte .NET-Architektur, Agile Prozesse, XAML, Web und CloudTechnologieberater fr die Intel Developer Zone Sprecher auf Konferenzen und User GroupsFreier Autor fr heise.de, dotnetpro, WindowsDeveloper und viele weitere FachmagazineVideo-Trainer bei video2brain und MicrosoftGregor Biswanger

Microsoft MVP, Intel Black Belt & Intel Software Innovatordotnet-blog.netabout.me/gregor.biswanger

3

Unsere gemeinsame ReisePerformance messenWelche Probleme gibt es bei Hybrid-AppsWie funktioniert der BrowserZahlreiche Performance-Tipps fr Web-Entwickler

4

HTML5 ist langsam?

5

Nein, das stimmt nicht!

6

Was genau bedeutet schnell?

7

100 ms ist ein gutes und realistisches Ziel

Das ist unser Ziel!

8

Was ist Apache Cordova? Wie Hybrid-App Entwicklung mit HTML5?

9

Die Lsung: Hybrid-Apps mit Apache CordovaCordova ist ein JavaScript-Framework fr lokal installierbare WebApps auf mobilen EndgertenIst Open-Source und liegt auf GitHubUntersttzte Plattformen: iOS, Android, LG webOS, Symbian OS, BlackBerry, Tizen, Firefox OS, Windows Phone, Windows 8FeaturesZugriff auf SensorenPlattformspezifische Funktionen (Notifications)Zugriff auf KontakteZugriff auf lokale DateienCordova bietet kein UI Framework!

cordova.apache.org

10

Der Cordova BuildCloud Compiler

JS

CSS

HTMLoder

AppsWWW ProjektLocal Compiler

11

Plattform (Betriebssystem)Native App (Android, WP, iOS)WebView (Browser)Hybrid-App ArchitekturWWW ProjektFrontend HTML5 und CSS (Twitter Bootstrap)Backend - JavaScript (Apache Cordova)

12

Plattform (Betriebssystem)Native App (Android, WP, iOS)WebView (Browser)Cordova Plugin ArchitekturFrontend HTML5 und CSS (Twitter Bootstrap)Backend - JavaScript (Apache Cordova)APISensoren (Hardware)

PluginPlugin

Android und Windows Phone bentigen Zugriffsberechtigungen und/oder Hardware nicht vorhanden.

13

Wie knnen wir die Performance testen?

14

Wichtig! Am besten auf alten Gerten testen

15

Dann bringt ein Test auf neuer Hardware

16

Okay, also eine Web-Browser-App im Vollbildmodus

17

Problem!!=

18

Das Crosswalk Project

Open-Source (BSD Lizenz)Embedded Chrome ChromiumFr Android und TizenAb Android Version 4Ab Tizen Version 3Nachteil: Paketgre circa 15-20 MBAn Crosswalk Lite wird aktuell gearbeitetPaketgre circa 7 MBcrosswalk-project.org

19

Kostenlos Builden via Intel XDK

xdk.intel.com

20

WKWebViewCordova Plug-InErsetzt die Standard UIWebViewAb iOS 8 verfgbar

21

Einbinden ganz einfach via Cordova Plug-Inber die Plugin ID:com.telerik.plugins.wkwebview

Beim Intel XDK ganz einfach ber den Plug-In Manager

22

Dann mssen wir analysieren, wie ein Browser unter der Haube arbeitet

23

Erst wird alles geladen

24

BSE!

...

25

Gut

...

26

Get auch fr HTML5 Browser mit async-Tag

...

27

Unterschiede bei der Script-Ausfhrung

28

Auch BSE!

.item { color: white; }

29

Die richtige Reihenfolge der HTML-StrukturCSS-Code immer beim Header unterbringenVermeide Embedded und Inline StylesJavaScript-Code immer am Ende vom BodyAb HTML5 Hilft der async-Tag fr die Verarbeitung zum richtigen Zeitpunkt

30

Und wieder BSE!

...

31

Gut

...

32

Minifying von DateienDas Laden der Daten ist krzerCSS-Styles werden schneller gerendertApp-Paket wird kompakter

33

Falls man Ressourcen nicht lokal ablegen kann, dann lieber CDN nutzen

...

34

Das Content Delivery Network (CDN)Ressourcen werden automatisch gecachedjsdelivr.com

35

Quiz: Welcher Download ist schneller?10 x 1 KB Groe Bilddateien1 x 10 KB Groe Bilddatei

36

Die Lsung ist BDie HTTP-Spezifikation kann nur wenige parallele Downloadvorgnge ausfhren.

37

CSS Sprite Bilder verwenden

Icons.png: 1 x 13 KB Groe DateiAlle ntigen Grafiken auf einem Bild enthaltenKommt ursprnglich aus der SpieleentwicklungEin Download fr alle ntigen GrafikenAustausch von Grafiken ohne Verzgerung (Flackern)

38

CSS Sprite Bilder verwenden

240px40px

40pxScenario #1 Multiple FilesScenario #2 - Image Sprite40px6 Bilder6 Verbindungen96 KB1 Bild1 Verbindung21 KB40px40px40px40px40px40px

39

BSE!.iconGlas { width: 20px; height: 20px; background-image: url(img/glas.png);}

.iconHeart { width: 20px; height: 20px; background-image: url(img/heart.png);}

40

Gut .spriteIcon { width: 20px; height: 20px; background-image: url(img/icons.png); }

.spriteIconGlas { background-position: 0 0; } .spriteIconHeart { background-position: -90px 0; }

41

Quiz: Was ist besser? JPEG oder PNG?JPEGPNGJe nach Anwendungsfall

42

Die Lsung ist CJPEG fr Fotografien: Landschaften oder GesichterPNG: Logo, Diagramme, Screenshots (verbraucht mehr Memory und Decodierung)Bitte vermeiden: GIF, TIFF, BMP, WebP, etc.

43

Bilder vom Download bis zur AnzeigeCopy to GPURequest

Decode

UI Thread

Stylesheet

HTML Doc

Image

GPU UsagePartial Response ReceivedPartial Response Received

DownloadsCPU UsageGPU UsageDisplay

GPU Copy

ProcessingDecoding

44

Okay, die Daten wurden geladen. Was steckt noch hinter dem Browser?

45

Zwei Threads teilen sich die Arbeit

Main ThreadEr fhrt den JavaScript-Code ausBerechnet HTML-ElementeGemeinsam mit CSS-Styles (Layouten)Verarbeitet die Elemente in Bitmaps

Composition ThreadZeichnet Bitmaps mit der GPU (Circa 60 mal die Sekunde)Berechnung der Sichtbaren Elemente Berechnung fr die Bewegung von Elementen (Scrollen)Arbeit fr dichFertig! berprf mal bitteHier mal bitte ZeichnenNEINNur wenn ich gerade nichts zu tun hab!

46

Web Runtime Architektur

Networking / CacheParsers127438956DOMTreeFormattingLayoutPainting127438956Display TreeCompositingDOM API& CapabilitiesJavaScriptCSS Cascade

47

Die meiste Arbeit steckt beim Reflow

48

Okay, verstanden.. Jetzt sind wir bereit fr weitere Top Performance-Tipps!

49

Gefhrliche Animation! Warum?@keyframes drive { from { margin-top: 0px; margin-left: -400; } to { margin-top: 50px; margin-left: 200px; }}

50

Erst recht, BSE!$("#element").animate({ "margin-left": "200px", "margin-top": "50px" }, 2000);

51

Finger weg von JQuery!

52

Perfekt! So gehts ab @keyframes drive { from { transform: translate(-400px, 0px); } to { transform: translate(200px, 50px); }}

53

Animationen GPU beschleunigen mit CSS-TransitionsCompositor-Thread bernimmt die Animation einmalig, der Rest wird von der GPU verarbeitetTipp: Anstatt display:none oder visibility:hidden, mit Transitions die Elemente auerhalb vom Screen ablegen. Das ist 3-5 x schneller.

54

Waaahhh!-ms-gradient(linear, 50% 50%, 0% 34%, from(#666666), to(#666666), color-stop(.3,#333333))-webkit-gradient(linear, 50% 50%, 0% 34%, from(#666666), to(#666666), color-stop(.3,#333333))-moz-gradient(linear, 50% 50%, 0% 34%, from(#666666), to(#666666), color-stop(.3,#333333))gradient(linear, 50% 50%, 0% 34%, from(#666666), to(#666666), color-stop(.3,#333333))

55

Ein Herz fr JPEG!