HTML5-Performance: So rennt Ihre App und nicht Ihre Anwender (weg)

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

Homepage
andre@andrekraemer.de | http://andrekraemer.de | http://andrekraemer.de/blog | http://github.com/AndreKraemer
Vielen Dank!
Blog
Xing
Facebook
Twitter
Google+
6

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?

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

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
Paragrap
h 1
p
Paragrap
h 2
p
Paragrap
h 3
p
Paragrap
h 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:
Source Code:

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 Caching
Online Demo:
Source Code:

Ajax Caching
• Der Browser Cache cached GET Anfragen an Web Services
• Alternative: LocalStorage

Demo Offline Caching
Online Demo:
Source Code:

Rendering / LayoutStorm
Script Style Layout Paint
Script Style Layout Style Layout Style Layout Paint

Demo Layout Storm
Online Demo:
Source Code:

Demo RequestAnimationFrame
Online Demo:
Source Code:

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

Homepage
andre@andrekraemer.de | http://andrekraemer.de | http://andrekraemer.de/blog | http://github.com/AndreKraemer
Vielen Dank!
Blog
Xing
Facebook
Twitter
Google+
37

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 Aurelia
38andre@andrekraemer.de | http://andrekraemer.de | http://andrekraemer.de/blog | http://github.com/AndreKraemer

HTML5-Performance: So rennt Ihre App und nicht Ihre Anwender (weg)

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (10)

Semelhante a HTML5-Performance: So rennt Ihre App und nicht Ihre Anwender (weg)

Semelhante a HTML5-Performance: So rennt Ihre App und nicht Ihre Anwender (weg) (20)

Mais de André Krämer

Mais de André Krämer (15)

HTML5-Performance: So rennt Ihre App und nicht Ihre Anwender (weg)

Notas do Editor