38
HTML5-Performance: So rennt Ihre App und nicht Ihre Anwender (weg) André Krämer Softwareentwickler, Trainer, Berater
| Date post: | 14-Feb-2017 |
| Category: |
Software |
| Upload: | andre-kraemer |
| View: | 47 times |
| Download: | 0 times |
HTML5-Performance: So rennt Ihre App und nicht
Ihre Anwender (weg)André Krämer
Softwareentwickler, Trainer, Berater
Warum ist JavaScript langsam?
Foto: © pkruger | istockphoto.com
Ist es nicht!
Chakra, V8 & Co sind rasend schnell!
Foto: © Rostislav Sedlacek | Fotolia.com
Zusammenfassung
• Moderne JavaScript Engines sind sehr performant• Die Laufzeitgeschwindigkeit von JavaScript ist heute
kein Problem mehr
6
Homepage
[email protected] | http://andrekraemer.de | http://andrekraemer.de/blog | http://github.com/AndreKraemer
Vielen Dank!
Blog
Google+
Nicht so schnell ....
Nutzer von Webanwendungen …
Foto: © Romolo Tavani | Fotolia.com
Warum sind Webanwendungen langsam?
Foto: © pkruger | istockphoto.com
Wann ist eine Webanwendung „langsam“?• Zu viel JavaScript?• Komplexes CSS?• Komplexes DOM?• DOM Manipulation?• Ajax?• IE6• ...
Langsam aus Sicht
des Anwenders
Foto: © Shakzu | Fotolia.com
Antwortzeiten nach Jakob Nielsen
• 0 – 100 ms: Das System antwortet unverzüglich Ich habe etwas gemacht• 101 ms – 1000 ms: Benutzer bemerkt Verzögerung,
bleibt im Fluss Ich habe dem Computer befohlen etwas zu machen• 1 s – 10 s: Der Benutzer fokussiert sich noch auf die
Aufgabe• > 10 Sekunden: Der Anwender bricht die Aufgabe ab• Zusatzinfo: Animationen auf dem Bildschirm werden bei
60 Frames pro Sekunde als flüssig wahrgenommen (1 Frame = 1000/60 = 16,6666 ms)
Angelehnt an: https://www.nngroup.com/articles/response-times-3-important-limits/
Muss jede Interaktion in weniger als 100ms abgeschlossen sein?
NEIN!
Interaktion < 100 msErste Darstellung < 1 s
Lebenszyklus einer Webanwendung
Seite und Ressourcen
werden geladen
Seite wird dargestellt
Benutzer interagiert
mit der Seite
AJAX Anfrage
DOM Manipulation
Erste Darstellung
Initiale Darstellung / Critical Rendering Path (CRP)
Netzwerk
HTML DOM
JavaScript
CSS CSSOM
Render Tree Layout Paint
Strategien zur Verbesserung des Netzwerkzugriffes (Serverseitig / Grundwissen)• Anzahl der übertragenen Bytes reduzieren
• Reduzieren Sie das DOM• Verkleinern (Minify) der Dateien• Komprimieren der Dateien (gzip)• Nicht benötigte Styles / JavaScript entfernen• CDNs einbinden• Domains ohne Cookies für statische Inhalte nutzen• Cache Header setzen ...
• Anzahl der Anfragen reduzieren• Kombinieren von Dateien
Demo (Serverseitige Optimierung)Online Demo: http://andrekraemer.github.io/WebPerfDemo/Demo1/
Source Code: http://github.com/andrekraemer/WebPerfDemo/Demo1/
DOM Parsing (1)
<!DOCTYPE html><html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Rendering</title> <link href=“css/style.css“ rel=“stylesheet“/> </head> <body> <h1>Demo 2 Rendering</h1> <p>Paragraph 1</p> <p>Paragraph 2</p> <p>Paragraph 3</p> <p>Paragraph 4</p> </body></html>
DOM Parsing (2)
html
head
meta meta title link
body
h1
Demo 2
p
Paragraph 1
p
Paragraph 2
p
Paragraph 3
p
Paragraph 4
CSS Parsing (CSSOM) (1)
body { font-size: 20px;}p { margin:20px;}p:nth-child(3) { display: none;}
CSS Parsing (CSSOM) (2)
body
font-size: 20px
p
margin: 20px
nth-child(3): display:
none
Render Tree
body
h1
Demo 2
p
Paragraph 1
p
Paragraph 3
p
Paragraph 4
CSS blockiert das Rendering!
Netzwerk
HTML DOM
CSS CSSOM
Render Tree
JavaScript blockiert das DOM Parsing und kann erst ausgeführt werden, wenn das CSSOM vollständig ist
Netzwerk
HTML DOM
JavaScript
CSS CSSOM
Render Tree
Demo Critical Rendering Path (CRP)Online Demo: http://andrekraemer.github.io/WebPerfDemo/Demo2/
Source Code: http://github.com/andrekraemer/WebPerfDemo/Demo2/
Caching
• Über Cache Header und ETags können Dateien im lokalen Browser Cache vorgehalten werden• Dieser kann jedoch durch den Benutzer (oder
automatisch durch den Browser) gelöscht werden• Alternative, besonders für Single Page Applications:• Caching über den HTML 5 Offline Modus
Demo Offline CachingOnline Demo: http://andrekraemer.github.io/WebPerfDemo/Demo3/
Source Code: http://github.com/andrekraemer/WebPerfDemo/Demo3/
Laufzeitoptimierung
Ajax Caching
• Der Browser Cache cached GET Anfragen an Web Services• Alternative: LocalStorage
Demo Offline CachingOnline Demo: http://andrekraemer.github.io/WebPerfDemo/Demo4/
Source Code: http://github.com/andrekraemer/WebPerfDemo/Demo4/
Rendering / LayoutStorm
Script Style Layo
ut PaintScrip
t Style Layout Style Layo
ut Style Layout Paint
Demo Layout StormOnline Demo: http://andrekraemer.github.io/WebPerfDemo/Demo5/
Source Code: http://github.com/andrekraemer/WebPerfDemo/Demo5/
Demo RequestAnimationFrameOnline Demo: http://andrekraemer.github.io/WebPerfDemo/Demo6/
Source Code: http://github.com/andrekraemer/WebPerfDemo/Demo6/
Zusammenfassung
• Verstehen Sie das Critical Path Rendering um die Zeit zur ersten Darstellung Ihrer Website zu optimieren• CSS und JavaScript blockieren das Rendering• Überdenken Sie Ihre Caching Strategien• Abstrahieren Sie Datenzugriffe um einfach Caching
einbauen zu können• Liefern Sie nach Möglichkeit zunächst gecachte Inhalte
und liefern Sie die „Live Daten“ anschließend nach• Rendern / Zeichnen Sie über Request-Animation Frame
statt über SetTimeout
37
Homepage
[email protected] | http://andrekraemer.de | http://andrekraemer.de/blog | http://github.com/AndreKraemer
Vielen Dank!
Blog
Google+
38
Meine Dienstleistungen
• Schulungen• ASP.NET / AngularJS / Aurelia• Xamarin• TX Text Control• Unit Testing• Team Foundation Server• .NET Datenzugriff (Entity Framework, NHibernate, Micro O/R Mapper)
• Consulting• Durchführung von Technologieworkshops• Code- / Architekturreviews• Analyse von managed Memory Leaks / Performancereviews• Prototypenentwicklung• Remote Entwickler-Support• Projektbegleitendes Coaching
• Softwareentwicklung• Mobile Apps (Android, iOS, Windows 10, Windows 8, Windows Phone)• Entwicklung von Web-Anwendungen mit ASP.NET und AngularJS oder
[email protected] | http://andrekraemer.de | http://andrekraemer.de/blog | http://github.com/AndreKraemer
![HTML5 Local Storrage Solutions [German]](https://static.unterlagen.site/doc/80x56/54b69c1f4a795968278b46e9/html5-local-storrage-solutions-german.jpg)
