aber schnell! top html5 performance tipps für hybrid- und web-apps
TRANSCRIPT
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!