Lange Wartezeiten und mangelnde Responsivität unserer Webapplikation führen zu unzufriedenen Benutzern, was sich in hohen Absprungraten und Abwanderung zur Konkurrenz oder einfach der Weigerung, die Applikation zu verwenden, niederschlägt. Das Problem einer langsamen Applikation lässt sich jedoch leider nicht ganz so einfach lösen. Wichtig für eine nachhaltige Lösung ist das Verständnis der Abläufe im Browser. Aus diesem Grund beschäftigen wir uns hier mit Konzepten wie dem Critical Rendering Path und einigen Charakteristiken der JavaScript-Engines. Im Zuge dieses Vortrags werden einige der häufigsten Problemstellungen von Webapplikationen analysiert und Lösungsansätze und Best Practices zur Behebung der Performanceprobleme vorgestellt.

1. JavaScript Performance
Q.pictures / pixelio.de

2. Guten Morgen!!!

3. Sebastian
• Sebastian Springer
• aus München
• arbeite bei MaibornWolff GmbH
• https://github.com/sspringer82
• @basti_springer
• JavaScript Entwickler

4. IT-Beratung &
Software Engineering

5. Wie mache ich meine Applikation
Margot Kessler / pixelio.de
schneller

6. Eigene Optimierung
Tim Reckmann / pixelio.de

7. Caching von Werten
let arr = ['Peter', 'Paul', 'Mary'];
for (let i = 0; i < arr.length; i++) {
console.log(arr[i]);
} // 1.734ms
let arr = ['Peter', 'Paul', 'Mary'];
for (let i = 0, j = arr.length; i < j; i++) {
console.log(arr[i]);
} // 1.699ms

8. Optimierung der Engine
Dieter Schütz / pixelio.de

9. Engine Optimierung
let arr = ['Peter', 'Paul', 'Mary'];
for (let i = 0; i < arr.length; i++) {
console.log(arr[i]);
} // 1.734ms
for (let i = 0; i < arr.length; i++) {
console.log(arr[i]);
} // 0.079ms
Bei einem zweiten Durchlauf

10. Optimierung
Die Optimierung von JavaScript-Quellcode ist nicht euer
Problem! Die meiste Arbeit nimmt euch hier die Engine ab.
Die Optimierung des Quellcodes bringt relativ wenig und geht
meistens auf Kosten der Lesbarkeit.
Also: Das Big Picture im Auge behalten!

11. Was zählt?
Die Zeit bis der Nutzer die ersten
Informationen sieht und mit der Seite
interagieren kann.

12. Critical Rendering Path
Thorben Wengert / pixelio.de

13. Critical Rendering Path
Der Prozess zwischen dem Empfang der HTML-, CSS- und
JavaScript-Dateien und der Darstellung der Information im
Browser.

16. Critical Rendering Path
1. HTML Verarbeitung -> DOM
2. CSS Verarbeitung -> CSSOM
3. Render Tree Erzeugung
4. Darstellung

17. HTML Verarbeitung
https://developers.google.com/web/fundamentals/performance/critical-rendering-path/constructing-the-object-model
https://creativecommons.org/licenses/by/3.0/

18. CSS Verarbeitung
https://developers.google.com/web/fundamentals/performance/critical-rendering-path/constructing-the-object-model
https://creativecommons.org/licenses/by/3.0/

19. Render Tree
https://developers.google.com/web/fundamentals/performance/critical-rendering-path/constructing-the-object-model
https://creativecommons.org/licenses/by/3.0/

20. Messung

21. Download
Karl-Heinz Laube / pixelio.de

22. Download von Dateien
Ein Browser hat nur eine beschränkte Anzahl von parallelen
Verbindungen zu einem Server.
Firefox: 6
Chrome: 6
Internet Explorer: 13

23. Download - Lösung
Möglichst wenige, möglichst kleine Dateien ausliefern.
CSS: Präprozessoren + Minifier
JS: Modulsystem + Minifier
Images: Sprites

24. Download

25. Service Worker

26. Service Worker
Service Worker sind separate Prozesse im Browser, die als
Proxy zwischen Client und Server arbeiten. Sie können
Anfragen abfangen und aus ihrem Cache direkt beantworten.
Web-Applikationen werden damit wesentlich schneller und
können auch offline genutzt werden.

27. Service Worker

28. Blockaden
lichtkunst.73 / pixelio.de

29. Render Blocking CSS
Jede CSS-Datei blockiert die Darstellung der Seite für kurze
Zeit.
Je mehr CSS verwendet wird, desto länger dauert die
Blockade.

30. Render Blocking CSS
Kein @import verwenden - lieber alles in eine Datei.
Weniger CSS im Critical Rendering Path verwenden, z.B.
media-Attribut im style-Tag.
Wenn sonst nichts hilft: Inline CSS.

31. Render Blocking JavaScript
Alles JavaScript, das nicht direkt zum initialen Pageload
benötigt wird, kann nachgeladen werden.
Z.B. über ein generiertes Script-Tag beim load-Event.
oder lazy loading Funktionalität des Modulloaders (z.B.
webpack)

32. App Shell Architecture
Minimales HTML, CSS und JavaScript
als Grundlage für das User Interface.
• lädt schnell
• kann gecacht werden
• zeigt dynamischen Inhalt an

33. Single Page-
Applikationen
Tim Reckmann / pixelio.de

34. Der Benutzer bewegt sich in einer Applikation. Die
Applikation bleibt über längere Zeit im Browser geöffnet.
Daten werden bei Bedarf nachgeladen.
Es erfolgen keine Pageloads.

35. Der State der Applikation wird im Speicher gehalten.
Die Repräsentationen vieler Objekte liegen im Speicher.
Der Speicherverbrauch steigt über die Laufzeit an.

36. JavaScript Engines
Rudolpho Duba / pixelio.de

37. JavaScript Engines
Der Wettbewerb zwischen den Browserherstellern hat einige
hoch optimierte Engines hervorgebracht.

38. JavaScript Engines
• Google Chrome: V8
• Mozilla Firefox: SpiderMonkey
• Microsoft Internet Explorer: Chakra
• Apple Safari: Nitro

39. Beispiel: V8
V8 is a JavaScript engine specifically designed for fast
execution of large JavaScript applications.

40. Hidden Classes
Bernd Kasper / pixelio.de

41. Hidden Classes
Um den Zugriff auf Eigenschaften zu beschleunigen, wird
nicht ein Verzeichnis mit allen Eigenschaften verwendet,
sondern pro Objekt Hidden Classes erzeugt, die auf den
korrekten Speicherpunkt verweisen.

42. function Point(x, y) {
this.x = x;
this.y = y;
}
var p1 = new Point(2, 4);

43. function Point(x, y) {
this.x = x;
this.y = y;
}
var p1 = new Point(2, 4);
p1
Hidden Class
C0

44. function Point(x, y) {
this.x = x;
this.y = y;
}
var p1 = new Point(2, 4);
p1
Hidden Class
C0
x: offset 0
Hidden Class
C0 Wird Eigenschaft x hinzugefügt,
verwende C1.

45. Hidden Class
C1
x: offset 0
function Point(x, y) {
this.x = x;
this.y = y;
}
var p1 = new Point(2, 4);
p1
Hidden Class
C2
x: offset 0
y: offset 1
Hidden Class
Wird Eigenschaft y hinzugefügt,
verwende C2.

46. Hidden Classes
Weitere Objekte vom selben Typ verwenden die gleichen
Hidden Classes und deren Übergänge.

47. JIT Compiler

48. JIT Compiler
V8 kompiliert JavaScript bei der ersten Ausführung in
Maschinencode.
Die passenden Hidden Classes werden bestimmt und der
Code entsprechend gepatcht. Auch alle zukünftigen
Verwendungen des Objekts werden mit der Hidden Class
versehen und bei Bedarf von der Engine korrigiert.

49. JIT Compiler
# ebx = the point object
cmp [ebx,<hidden class offset>],<cached hidden class>
jne <inline cache miss>
mov eax,[ebx, <cached x offset>]
p1.x

50. Garbage Collection
Moni Sertel / pixelio.de

51. Garbage Collection
V8 verschiebt das Memory Management möglichst in
ungenutzte Idle Time des Prozessors, um den Impact auf die
Darstellung zu minimieren.
Der Garbage Collector prüft regelmäßig den belegten
Speicher und löscht nicht mehr verwendete Informationen.
Nicht mehr verwendet heißt: keine Referenz mehr auf ein
Objekt.

52. Garbage Collection
neu zugewiesener
Speicher
langlebige Objekte
Speicheraufteilung:
Die meisten Objekte haben nur eine sehr kurze
Lebensspanne.
young generation
old generation

53. neu zugewiesener
Speicher
Garbage Collection
Objekt1
Objekt2
Objekt3
Objekt1
Objekt2
Objekt3
langlebige Objekte
Objekt1
Sobald ein Speicherblock voll ist, werden die
verwendeten Objekte verschoben, der Speicher
dann gelöscht. Beim zweiten Verschieben wird
das Objekt in den old Generation Space
verschoben.

54. Garbage Collection
Je weniger Objekte verschoben werden müssen, desto
schneller ist die young generation Garbage Collection.

55. Garbage Collection
Überschreitet der old generation space ein bestimmtes Limit,
wird der Bereich mit einem mark-and-sweep Collector
aufgeräumt.
Aktive Objekte werden markiert und anschließend alle nicht
markierten Objekte gelöscht.
Ein kompletter Durchlauf kann 100 ms dauern. Die
Applikation wird in dieser Zeit angehalten.
V8 kann diesen Prozess auch inkrementell in 5 ms-Schritten
durchführen.

56. JavaScript Engines
Also:
Werden Strukturen mehrmals verwendet, greifen viele
Optimierungen der Engine.

57. Repaints & Reflows
Tim Reckmann / pixelio.de

58. Repaints & Reflows
Repaint: Der Browser überprüft alle Elemente auf ihre
Sichtbarkeit, Farbe, Abmessungen und andere visuelle
Eigenschaften und aktualisiert die relevanten Teile des
Bildschirms.

59. Repaints & Reflows
Reflow: Der Browser berechnet das Layout der Seite.
Reflows für weitere Elemente können ausgelöst werden
(Kinder, benachbarte Elemente, im DOM folgende Elemente).
Danach wird ein Repaint ausgelöst.

60. Auslöser für Reflows
• Einfügen, Entfernen oder Aktualisieren eines DOM Elements
• Verändern des Inhalts einer Seite
• Verschieben eines Elements
• Animationen
• Abmessungen auslesen
• CSS-Eigenschaften ändern
• Klassennamen eines Elements ändern
• Stylesheet hinzufügen oder entfernen
• Fenstergröße ändern
• Scrollen

61. Vermeiden von Reflows
• Folgen von einzelnen Styleänderungen vermeiden
• Operationen über Klassennamen zusammenfassen
• Operationen außerhalb des DOMs durchführen und
danach einhängen
• Styles in Variablen cachen
• Für Animationen besser fixe Positionierung
wählen

62. Profiling
Rendering: Layoutberechnungen
Painting: Darstellung der Seite

63. Memory Leaks
detlef menzel / pixelio.de

64. Memory Leaks
Machen unsere Applikationen langsam, führen zu Abstürzen
und hohen Latenzen.
Ein Memory Leak tritt auf, wenn Speicher nicht mehr
gebraucht wird, aber nicht zur Garbage Collection
freigegeben wird.

65. Memory Leaks
Globale Variablen
Vergessene Intervalle
DOM-Knoten in Datenstrukturen
Closures

66. Memory Leaks
var theThing = null;
var replaceThing = function () {
var originalThing = theThing;
var unused = function () {
if (originalThing)
console.log("hi");
};
theThing = {
longStr: new Array(1000000).join('*'),
someMethod: function () {
console.log(someMessage);
}
};
};
setInterval(replaceThing, 100);
http://info.meteor.com/blog/an-interesting-kind-of-javascript-memory-leak

67. Memory Leaks
Memory läuft langsam voll

68. Animationen
Tim Reckmann / pixelio.de

69. JavaScript Animationen
Bei einer Animation wird nach einer bestimmten Zeit eine CSS-
Eigenschaft eines Objekts verändert. Ist die gewählte
Zeitspanne gering genug, entsteht eine mehr oder weniger
flüssige Animation.

70. function move(elem, to) {
var left = 0;
function frame() {
left++;
elem.style.left = left + 'px';
if (left === to) {
clearInterval(id)
}
}
var id = setInterval(frame, 10);
}
document.getElementById('outer').onclick = function () {
move(this.children[0], 500);
};
<div id="outer" class="outer">
<div id="inner" class="inner"></div>
</div>
HTML
CSS

71. Nachteile
JavaScript wird über die CPU ausgeführt. Muss sich also die
Ressourcen mit vielen anderen Programmen teilen.
GC-Cycles können zu unschönen Effekten führen, da die
Ausführung angehalten wird.
Bei hoher CPU-Last sind die Animationen nicht mehr flüssig.

72. CSS-Animationen

73. CSS-Animationen
CSS-Animationen werden durch die GPU berechnet und
belasten die CPU nicht.
CSS-Animationen erscheinen flüssiger als JavaScript-
Animationen.
Der Browser kann die Animationen optimieren (z.B. bei nicht
sichtbaren Tabs).

74. document.getElementById('outer').onclick = function () {
this.children[0].className += ' move';
};
#inner {
transition: left 5s linear;
}
.move {
left: 500px;
}
<div id="outer" class="outer">
<div id="inner" class="inner"></div>
</div>
HTML
CSS
JS

75. CSS-Animationen
Wenn Transitionen nicht reichen, kann man über Animationen
mit @keyframes noch wesentlich mehr herausholen.
Es gibt auch Generatoren wie z.B. http://cssanimate.com/

76. Prefetching

77. Prefetching
Sorgt dafür, dass der Browser gewisse Seiten bereits vorlädt,
um sie schneller laden zu können.
Chrome und IE unterstützen auch Prerendering, bei dem die
Seite bereits vorgerendert wird.
<link rel="prefetch" href="users.html" />

78. Fragen?
Rainer Sturm / pixelio.de

79. KONTAKT
Sebastian Springer
sebastian.springer@maibornwolff.de
MaibornWolff GmbH
Theresienhöhe 13
80339 München
@basti_springer
https://github.com/sspringer82