SlideShare ist ein Scribd-Unternehmen logo
JavaScript Performance
Q.pictures / pixelio.de
Guten Morgen!!!
Sebastian
• Sebastian Springer
• aus München
• arbeite bei MaibornWolff GmbH
• https://github.com/sspringer82
• @basti_springer
• JavaScript Entwickler
IT-Beratung &
Software Engineering
Wie mache ich meine Applikation
Margot Kessler / pixelio.de
schneller
Eigene Optimierung
Tim Reckmann / pixelio.de
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
Optimierung der Engine
Dieter Schütz / pixelio.de
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
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!
Was zählt?
Die Zeit bis der Nutzer die ersten
Informationen sieht und mit der Seite
interagieren kann.
Critical Rendering Path
Thorben Wengert / pixelio.de
Critical Rendering Path
Der Prozess zwischen dem Empfang der HTML-, CSS- und
JavaScript-Dateien und der Darstellung der Information im
Browser.
Critical Rendering Path
1. Der Browser lädt die angeforderte HTML-Datei.
2. Der Browser liest die HTML-Datei ein und sucht nach
Bildern, CSS und JavaScript.
3. Die Bilder werden heruntergeladen.
4. Die CSS-Dateien werden heruntergeladen.
5. Die JavaScript-Dateien werden heruntergeladen.
Download
Karl-Heinz Laube / pixelio.de
Download von Dateien
Ein Browser hat nur eine beschränkte Anzahl von parallelen
Verbindungen zu einem Server.
Firefox: 6
Chrome: 6
Internet Explorer: 13
Download - Lösung
Möglichst wenige, möglichst kleine Dateien ausliefern.
CSS: Präprozessoren + Minifier
JS: Modulsystem + Minifier
Images: Sprites
Download
Blockaden
lichtkunst.73 / pixelio.de
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.
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.
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)
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
Single Page-
Applikationen
Tim Reckmann / pixelio.de
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.
Der State der Applikation wird im Speicher gehalten.
Die Repräsentationen vieler Objekte liegen im Speicher.
Der Speicherverbrauch steigt über die Laufzeit an.
JavaScript Engines
Rudolpho Duba / pixelio.de
JavaScript Engines
Der Wettbewerb zwischen den Browserherstellern hat einige
hoch optimierte Engines hervorgebracht.
JavaScript Engines
• Google Chrome: V8
• Mozilla Firefox: SpiderMonkey
• Microsoft Internet Explorer: Chakra
• Apple Safari: Nitro
Beispiel: V8
V8 is a JavaScript engine specifically designed for fast
execution of large JavaScript applications.
Hidden Classes
Bernd Kasper / pixelio.de
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.
function Point(x, y) {

this.x = x;

this.y = y;

}



var p1 = new Point(2, 4);
function Point(x, y) {

this.x = x;

this.y = y;

}



var p1 = new Point(2, 4);
p1
Hidden Class
C0
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.
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.
Hidden Classes
Weitere Objekte vom selben Typ verwenden die gleichen
Hidden Classes und deren Übergänge.
JIT Compiler
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.
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
Garbage Collection
Moni Sertel / pixelio.de
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.
Garbage Collection
neu zugewiesener
Speicher
langlebige Objekte
Speicheraufteilung:
Die meisten Objekte haben nur eine sehr kurze
Lebensspanne.
young generation
old generation
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.
Garbage Collection
Je weniger Objekte verschoben werden müssen, desto
schneller ist die young generation Garbage Collection.
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.
JavaScript Engines
Also:
Werden Strukturen mehrmals verwendet, greifen viele
Optimierungen der Engine.
Repaints & Reflows
Tim Reckmann / pixelio.de
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.
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.
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
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
Profiling
Rendering: Layoutberechnungen
Painting: Darstellung der Seite
Memory Leaks
detlef menzel / pixelio.de
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.
Memory Leaks
Globale Variablen
Vergessene Intervalle
DOM-Knoten in Datenstrukturen
Closures
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
Memory Leaks
Memory läuft langsam voll
Animationen
Tim Reckmann / pixelio.de
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.
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
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.
CSS-Animationen
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).
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
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/
Prefetching
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" />
Fragen?
Rainer Sturm / pixelio.de
KONTAKT
Sebastian Springer
sebastian-springer@maibornwolff.de
MaibornWolff GmbH
Theresienhöhe 13
80339 München
@basti_springer
https://github.com/sspringer82

Weitere ähnliche Inhalte

Was ist angesagt?

2006 - NRW Conf: Asynchronous asp.net
2006 - NRW Conf: Asynchronous asp.net2006 - NRW Conf: Asynchronous asp.net
2006 - NRW Conf: Asynchronous asp.net
Daniel Fisher
 
Tech Talk: Cloud Computing
Tech  Talk: Cloud ComputingTech  Talk: Cloud Computing
Tech Talk: Cloud Computing
rjtg
 
Lehmanns Rails Erweitern
Lehmanns Rails ErweiternLehmanns Rails Erweitern
Lehmanns Rails Erweitern
jan_mindmatters
 
Node.js
Node.jsNode.js
TypeScript
TypeScriptTypeScript
TypeScript
Jens Siebert
 
Reaktive Applikationen mit Scala, Play und Akka
Reaktive Applikationen mit Scala, Play und AkkaReaktive Applikationen mit Scala, Play und Akka
Reaktive Applikationen mit Scala, Play und Akka
Markus Klink
 
digitalSTROM Developer Day 2011: digitalSTROM-Server-Apps
digitalSTROM Developer Day 2011: digitalSTROM-Server-AppsdigitalSTROM Developer Day 2011: digitalSTROM-Server-Apps
digitalSTROM Developer Day 2011: digitalSTROM-Server-AppsdigitalSTROM.org
 
JsUnconf 2014
JsUnconf 2014JsUnconf 2014
JsUnconf 2014
emrox
 
Testing tools
Testing toolsTesting tools
Testing tools
Sebastian Springer
 
Hands-on Hystrix - Best Practices und Stolperfallen
Hands-on Hystrix - Best Practices und StolperfallenHands-on Hystrix - Best Practices und Stolperfallen
Hands-on Hystrix - Best Practices und Stolperfallen
inovex GmbH
 
Einführung in die funktionale Programmierung mit Clojure
Einführung in die funktionale Programmierung mit ClojureEinführung in die funktionale Programmierung mit Clojure
Einführung in die funktionale Programmierung mit Clojure
Sascha Koch
 
Mein paralleles Leben als Java-Entwickler
Mein paralleles Leben als Java-EntwicklerMein paralleles Leben als Java-Entwickler
Mein paralleles Leben als Java-Entwickler
jlink
 
Powerful mostly unknown Javascript-Features
Powerful mostly unknown Javascript-FeaturesPowerful mostly unknown Javascript-Features
Powerful mostly unknown Javascript-Features
Sascha Hameister
 
digitalSTROM Developer Day 2011: digitalSTROM bindet auch externe Komponenten...
digitalSTROM Developer Day 2011: digitalSTROM bindet auch externe Komponenten...digitalSTROM Developer Day 2011: digitalSTROM bindet auch externe Komponenten...
digitalSTROM Developer Day 2011: digitalSTROM bindet auch externe Komponenten...
digitalSTROM.org
 
P6oo
P6ooP6oo
P6oo
lichtkind
 
Infrastructure as Code - BaselOne 17
Infrastructure as Code - BaselOne 17Infrastructure as Code - BaselOne 17
Infrastructure as Code - BaselOne 17
remigius-stalder
 
Prototype 1.7
Prototype 1.7Prototype 1.7
Prototype 1.7
msebel
 
TypeScript
TypeScriptTypeScript
TypeScript
Jens Siebert
 

Was ist angesagt? (20)

2006 - NRW Conf: Asynchronous asp.net
2006 - NRW Conf: Asynchronous asp.net2006 - NRW Conf: Asynchronous asp.net
2006 - NRW Conf: Asynchronous asp.net
 
Tech Talk: Cloud Computing
Tech  Talk: Cloud ComputingTech  Talk: Cloud Computing
Tech Talk: Cloud Computing
 
Lehmanns Rails Erweitern
Lehmanns Rails ErweiternLehmanns Rails Erweitern
Lehmanns Rails Erweitern
 
Node.js
Node.jsNode.js
Node.js
 
TypeScript
TypeScriptTypeScript
TypeScript
 
Reaktive Applikationen mit Scala, Play und Akka
Reaktive Applikationen mit Scala, Play und AkkaReaktive Applikationen mit Scala, Play und Akka
Reaktive Applikationen mit Scala, Play und Akka
 
Ruby on Rails SS09 05
Ruby on Rails SS09 05Ruby on Rails SS09 05
Ruby on Rails SS09 05
 
digitalSTROM Developer Day 2011: digitalSTROM-Server-Apps
digitalSTROM Developer Day 2011: digitalSTROM-Server-AppsdigitalSTROM Developer Day 2011: digitalSTROM-Server-Apps
digitalSTROM Developer Day 2011: digitalSTROM-Server-Apps
 
JsUnconf 2014
JsUnconf 2014JsUnconf 2014
JsUnconf 2014
 
Ruby on Rails SS09 08
Ruby on Rails SS09 08Ruby on Rails SS09 08
Ruby on Rails SS09 08
 
Testing tools
Testing toolsTesting tools
Testing tools
 
Hands-on Hystrix - Best Practices und Stolperfallen
Hands-on Hystrix - Best Practices und StolperfallenHands-on Hystrix - Best Practices und Stolperfallen
Hands-on Hystrix - Best Practices und Stolperfallen
 
Einführung in die funktionale Programmierung mit Clojure
Einführung in die funktionale Programmierung mit ClojureEinführung in die funktionale Programmierung mit Clojure
Einführung in die funktionale Programmierung mit Clojure
 
Mein paralleles Leben als Java-Entwickler
Mein paralleles Leben als Java-EntwicklerMein paralleles Leben als Java-Entwickler
Mein paralleles Leben als Java-Entwickler
 
Powerful mostly unknown Javascript-Features
Powerful mostly unknown Javascript-FeaturesPowerful mostly unknown Javascript-Features
Powerful mostly unknown Javascript-Features
 
digitalSTROM Developer Day 2011: digitalSTROM bindet auch externe Komponenten...
digitalSTROM Developer Day 2011: digitalSTROM bindet auch externe Komponenten...digitalSTROM Developer Day 2011: digitalSTROM bindet auch externe Komponenten...
digitalSTROM Developer Day 2011: digitalSTROM bindet auch externe Komponenten...
 
P6oo
P6ooP6oo
P6oo
 
Infrastructure as Code - BaselOne 17
Infrastructure as Code - BaselOne 17Infrastructure as Code - BaselOne 17
Infrastructure as Code - BaselOne 17
 
Prototype 1.7
Prototype 1.7Prototype 1.7
Prototype 1.7
 
TypeScript
TypeScriptTypeScript
TypeScript
 

Ähnlich wie JavaScript Performance

Von 0 auf 100 - Performance im Web
Von 0 auf 100 - Performance im WebVon 0 auf 100 - Performance im Web
Von 0 auf 100 - Performance im Web
Sebastian Springer
 
Best Practices für TDD in JavaScript
Best Practices für TDD in JavaScriptBest Practices für TDD in JavaScript
Best Practices für TDD in JavaScript
Sebastian Springer
 
Fanstatic pycon.de 2012
Fanstatic pycon.de 2012Fanstatic pycon.de 2012
Fanstatic pycon.de 2012Daniel Havlik
 
Debugging und Profiling
Debugging und ProfilingDebugging und Profiling
Debugging und Profiling
Sebastian Springer
 
JSF 2 Kompositkomponenten (JAX 2012)
JSF 2 Kompositkomponenten (JAX 2012)JSF 2 Kompositkomponenten (JAX 2012)
JSF 2 Kompositkomponenten (JAX 2012)
Michael Kurz
 
Ladezeiten Verbessern - Css Und JavaScript Komprimieren
Ladezeiten Verbessern - Css Und JavaScript KomprimierenLadezeiten Verbessern - Css Und JavaScript Komprimieren
Ladezeiten Verbessern - Css Und JavaScript Komprimieren
Joomla! User Group Fulda
 
Große Applikationen mit AngularJS
Große Applikationen mit AngularJSGroße Applikationen mit AngularJS
Große Applikationen mit AngularJS
Sebastian Springer
 
Cloud Deployment und (Auto)Scaling am Beispiel von Angrybird
Cloud Deployment und (Auto)Scaling am Beispiel von AngrybirdCloud Deployment und (Auto)Scaling am Beispiel von Angrybird
Cloud Deployment und (Auto)Scaling am Beispiel von Angrybird
AOE
 
Web Performance Optimierung (WPO)
Web Performance Optimierung (WPO)Web Performance Optimierung (WPO)
Web Performance Optimierung (WPO)
Martin Kliehm
 
Schnelle Winkel: 10x schnellere Webapps mit AngularJS und JEE
Schnelle Winkel: 10x schnellere Webapps mit AngularJS und JEESchnelle Winkel: 10x schnellere Webapps mit AngularJS und JEE
Schnelle Winkel: 10x schnellere Webapps mit AngularJS und JEE
Benjamin Schmid
 
Enterprise JS
Enterprise JS Enterprise JS
Enterprise JS
Oliver Ochs
 
Mobile Webentwicklung mit HTML5
Mobile Webentwicklung mit HTML5Mobile Webentwicklung mit HTML5
Mobile Webentwicklung mit HTML5
kkramhoeft
 
Reactive Programming
Reactive ProgrammingReactive Programming
Reactive Programming
Sebastian Springer
 
Javascript auf Client und Server mit node.js - webtech 2010
Javascript auf Client und Server mit node.js - webtech 2010Javascript auf Client und Server mit node.js - webtech 2010
Javascript auf Client und Server mit node.js - webtech 2010
Dirk Ginader
 
Microservices mit Rust
Microservices mit RustMicroservices mit Rust
Microservices mit Rust
Jens Siebert
 
Sh optifind praesentation_20130311
Sh optifind praesentation_20130311Sh optifind praesentation_20130311
Sh optifind praesentation_20130311Stefan Moises
 
Silverlight - Tipps & Tricks für Fortgeschrittene
Silverlight - Tipps & Tricks für FortgeschritteneSilverlight - Tipps & Tricks für Fortgeschrittene
Silverlight - Tipps & Tricks für Fortgeschrittene
André Wussow
 
XPages: Performance-Optimierung - Ulrich Krause (eknori) SNoUG 2013
XPages: Performance-Optimierung  - Ulrich Krause (eknori) SNoUG 2013XPages: Performance-Optimierung  - Ulrich Krause (eknori) SNoUG 2013
XPages: Performance-Optimierung - Ulrich Krause (eknori) SNoUG 2013
BCC - Solutions for IBM Collaboration Software
 
Production-ready Infrastruktur in 3 Wochen
Production-ready Infrastruktur in 3 WochenProduction-ready Infrastruktur in 3 Wochen
Production-ready Infrastruktur in 3 Wochen
André Goliath
 
Wie skaliert man Software as a Service Applikationen in der Windows Azure Cloud
Wie skaliert man Software as a Service Applikationen in der Windows Azure CloudWie skaliert man Software as a Service Applikationen in der Windows Azure Cloud
Wie skaliert man Software as a Service Applikationen in der Windows Azure Cloud
Patric Boscolo
 

Ähnlich wie JavaScript Performance (20)

Von 0 auf 100 - Performance im Web
Von 0 auf 100 - Performance im WebVon 0 auf 100 - Performance im Web
Von 0 auf 100 - Performance im Web
 
Best Practices für TDD in JavaScript
Best Practices für TDD in JavaScriptBest Practices für TDD in JavaScript
Best Practices für TDD in JavaScript
 
Fanstatic pycon.de 2012
Fanstatic pycon.de 2012Fanstatic pycon.de 2012
Fanstatic pycon.de 2012
 
Debugging und Profiling
Debugging und ProfilingDebugging und Profiling
Debugging und Profiling
 
JSF 2 Kompositkomponenten (JAX 2012)
JSF 2 Kompositkomponenten (JAX 2012)JSF 2 Kompositkomponenten (JAX 2012)
JSF 2 Kompositkomponenten (JAX 2012)
 
Ladezeiten Verbessern - Css Und JavaScript Komprimieren
Ladezeiten Verbessern - Css Und JavaScript KomprimierenLadezeiten Verbessern - Css Und JavaScript Komprimieren
Ladezeiten Verbessern - Css Und JavaScript Komprimieren
 
Große Applikationen mit AngularJS
Große Applikationen mit AngularJSGroße Applikationen mit AngularJS
Große Applikationen mit AngularJS
 
Cloud Deployment und (Auto)Scaling am Beispiel von Angrybird
Cloud Deployment und (Auto)Scaling am Beispiel von AngrybirdCloud Deployment und (Auto)Scaling am Beispiel von Angrybird
Cloud Deployment und (Auto)Scaling am Beispiel von Angrybird
 
Web Performance Optimierung (WPO)
Web Performance Optimierung (WPO)Web Performance Optimierung (WPO)
Web Performance Optimierung (WPO)
 
Schnelle Winkel: 10x schnellere Webapps mit AngularJS und JEE
Schnelle Winkel: 10x schnellere Webapps mit AngularJS und JEESchnelle Winkel: 10x schnellere Webapps mit AngularJS und JEE
Schnelle Winkel: 10x schnellere Webapps mit AngularJS und JEE
 
Enterprise JS
Enterprise JS Enterprise JS
Enterprise JS
 
Mobile Webentwicklung mit HTML5
Mobile Webentwicklung mit HTML5Mobile Webentwicklung mit HTML5
Mobile Webentwicklung mit HTML5
 
Reactive Programming
Reactive ProgrammingReactive Programming
Reactive Programming
 
Javascript auf Client und Server mit node.js - webtech 2010
Javascript auf Client und Server mit node.js - webtech 2010Javascript auf Client und Server mit node.js - webtech 2010
Javascript auf Client und Server mit node.js - webtech 2010
 
Microservices mit Rust
Microservices mit RustMicroservices mit Rust
Microservices mit Rust
 
Sh optifind praesentation_20130311
Sh optifind praesentation_20130311Sh optifind praesentation_20130311
Sh optifind praesentation_20130311
 
Silverlight - Tipps & Tricks für Fortgeschrittene
Silverlight - Tipps & Tricks für FortgeschritteneSilverlight - Tipps & Tricks für Fortgeschrittene
Silverlight - Tipps & Tricks für Fortgeschrittene
 
XPages: Performance-Optimierung - Ulrich Krause (eknori) SNoUG 2013
XPages: Performance-Optimierung  - Ulrich Krause (eknori) SNoUG 2013XPages: Performance-Optimierung  - Ulrich Krause (eknori) SNoUG 2013
XPages: Performance-Optimierung - Ulrich Krause (eknori) SNoUG 2013
 
Production-ready Infrastruktur in 3 Wochen
Production-ready Infrastruktur in 3 WochenProduction-ready Infrastruktur in 3 Wochen
Production-ready Infrastruktur in 3 Wochen
 
Wie skaliert man Software as a Service Applikationen in der Windows Azure Cloud
Wie skaliert man Software as a Service Applikationen in der Windows Azure CloudWie skaliert man Software as a Service Applikationen in der Windows Azure Cloud
Wie skaliert man Software as a Service Applikationen in der Windows Azure Cloud
 

Mehr von Sebastian Springer

HTMX - ist das die nächste Revolution im Web?
HTMX - ist das die nächste Revolution im Web?HTMX - ist das die nächste Revolution im Web?
HTMX - ist das die nächste Revolution im Web?
Sebastian Springer
 
Schnelleinstieg in Angular
Schnelleinstieg in AngularSchnelleinstieg in Angular
Schnelleinstieg in Angular
Sebastian Springer
 
Creating Enterprise Web Applications with Node.js
Creating Enterprise Web Applications with Node.jsCreating Enterprise Web Applications with Node.js
Creating Enterprise Web Applications with Node.js
Sebastian Springer
 
Divide and Conquer – Microservices with Node.js
Divide and Conquer – Microservices with Node.jsDivide and Conquer – Microservices with Node.js
Divide and Conquer – Microservices with Node.js
Sebastian Springer
 
From Zero to Hero – Web Performance
From Zero to Hero – Web PerformanceFrom Zero to Hero – Web Performance
From Zero to Hero – Web Performance
Sebastian Springer
 
A/B Testing mit Node.js
A/B Testing mit Node.jsA/B Testing mit Node.js
A/B Testing mit Node.js
Sebastian Springer
 
Angular2
Angular2Angular2
ECMAScript 6 im Produktivbetrieb
ECMAScript 6 im ProduktivbetriebECMAScript 6 im Produktivbetrieb
ECMAScript 6 im Produktivbetrieb
Sebastian Springer
 
Streams in Node.js
Streams in Node.jsStreams in Node.js
Streams in Node.js
Sebastian Springer
 
Typescript
TypescriptTypescript
Typescript
Sebastian Springer
 
Lean Startup mit JavaScript
Lean Startup mit JavaScriptLean Startup mit JavaScript
Lean Startup mit JavaScript
Sebastian Springer
 
Webapplikationen mit Node.js
Webapplikationen mit Node.jsWebapplikationen mit Node.js
Webapplikationen mit Node.js
Sebastian Springer
 
JavaScript Architektur
JavaScript ArchitekturJavaScript Architektur
JavaScript Architektur
Sebastian Springer
 
Angular translate
Angular translateAngular translate
Angular translate
Sebastian Springer
 
10 Dinge die ich an dir hasse - Stolpersteine in der Webentwicklung
10 Dinge die ich an dir hasse - Stolpersteine in der Webentwicklung10 Dinge die ich an dir hasse - Stolpersteine in der Webentwicklung
10 Dinge die ich an dir hasse - Stolpersteine in der WebentwicklungSebastian Springer
 
Error handling in JavaScript
Error handling in JavaScriptError handling in JavaScript
Error handling in JavaScript
Sebastian Springer
 
JavaScript Architektur
JavaScript ArchitekturJavaScript Architektur
JavaScript Architektur
Sebastian Springer
 
Java scriptarchitektur
Java scriptarchitekturJava scriptarchitektur
Java scriptarchitektur
Sebastian Springer
 

Mehr von Sebastian Springer (19)

HTMX - ist das die nächste Revolution im Web?
HTMX - ist das die nächste Revolution im Web?HTMX - ist das die nächste Revolution im Web?
HTMX - ist das die nächste Revolution im Web?
 
Schnelleinstieg in Angular
Schnelleinstieg in AngularSchnelleinstieg in Angular
Schnelleinstieg in Angular
 
Creating Enterprise Web Applications with Node.js
Creating Enterprise Web Applications with Node.jsCreating Enterprise Web Applications with Node.js
Creating Enterprise Web Applications with Node.js
 
Divide and Conquer – Microservices with Node.js
Divide and Conquer – Microservices with Node.jsDivide and Conquer – Microservices with Node.js
Divide and Conquer – Microservices with Node.js
 
From Zero to Hero – Web Performance
From Zero to Hero – Web PerformanceFrom Zero to Hero – Web Performance
From Zero to Hero – Web Performance
 
A/B Testing mit Node.js
A/B Testing mit Node.jsA/B Testing mit Node.js
A/B Testing mit Node.js
 
Angular2
Angular2Angular2
Angular2
 
ECMAScript 6 im Produktivbetrieb
ECMAScript 6 im ProduktivbetriebECMAScript 6 im Produktivbetrieb
ECMAScript 6 im Produktivbetrieb
 
Streams in Node.js
Streams in Node.jsStreams in Node.js
Streams in Node.js
 
Typescript
TypescriptTypescript
Typescript
 
Lean Startup mit JavaScript
Lean Startup mit JavaScriptLean Startup mit JavaScript
Lean Startup mit JavaScript
 
Webapplikationen mit Node.js
Webapplikationen mit Node.jsWebapplikationen mit Node.js
Webapplikationen mit Node.js
 
Node.js für Webapplikationen
Node.js für WebapplikationenNode.js für Webapplikationen
Node.js für Webapplikationen
 
JavaScript Architektur
JavaScript ArchitekturJavaScript Architektur
JavaScript Architektur
 
Angular translate
Angular translateAngular translate
Angular translate
 
10 Dinge die ich an dir hasse - Stolpersteine in der Webentwicklung
10 Dinge die ich an dir hasse - Stolpersteine in der Webentwicklung10 Dinge die ich an dir hasse - Stolpersteine in der Webentwicklung
10 Dinge die ich an dir hasse - Stolpersteine in der Webentwicklung
 
Error handling in JavaScript
Error handling in JavaScriptError handling in JavaScript
Error handling in JavaScript
 
JavaScript Architektur
JavaScript ArchitekturJavaScript Architektur
JavaScript Architektur
 
Java scriptarchitektur
Java scriptarchitekturJava scriptarchitektur
Java scriptarchitektur
 

JavaScript Performance

  • 3. Sebastian • Sebastian Springer • aus München • arbeite bei MaibornWolff GmbH • https://github.com/sspringer82 • @basti_springer • JavaScript Entwickler
  • 5. Wie mache ich meine Applikation Margot Kessler / pixelio.de schneller
  • 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.
  • 14.
  • 15.
  • 16. Critical Rendering Path 1. Der Browser lädt die angeforderte HTML-Datei. 2. Der Browser liest die HTML-Datei ein und sucht nach Bildern, CSS und JavaScript. 3. Die Bilder werden heruntergeladen. 4. Die CSS-Dateien werden heruntergeladen. 5. Die JavaScript-Dateien werden heruntergeladen.
  • 18. Download von Dateien Ein Browser hat nur eine beschränkte Anzahl von parallelen Verbindungen zu einem Server. Firefox: 6 Chrome: 6 Internet Explorer: 13
  • 19. Download - Lösung Möglichst wenige, möglichst kleine Dateien ausliefern. CSS: Präprozessoren + Minifier JS: Modulsystem + Minifier Images: Sprites
  • 22. 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.
  • 23. 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.
  • 24. 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)
  • 25. 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
  • 27. 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.
  • 28. Der State der Applikation wird im Speicher gehalten. Die Repräsentationen vieler Objekte liegen im Speicher. Der Speicherverbrauch steigt über die Laufzeit an.
  • 30. JavaScript Engines Der Wettbewerb zwischen den Browserherstellern hat einige hoch optimierte Engines hervorgebracht.
  • 31. JavaScript Engines • Google Chrome: V8 • Mozilla Firefox: SpiderMonkey • Microsoft Internet Explorer: Chakra • Apple Safari: Nitro
  • 32. Beispiel: V8 V8 is a JavaScript engine specifically designed for fast execution of large JavaScript applications.
  • 34. 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.
  • 35. function Point(x, y) {
 this.x = x;
 this.y = y;
 }
 
 var p1 = new Point(2, 4);
  • 36. function Point(x, y) {
 this.x = x;
 this.y = y;
 }
 
 var p1 = new Point(2, 4); p1 Hidden Class C0
  • 37. 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.
  • 38. 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.
  • 39. Hidden Classes Weitere Objekte vom selben Typ verwenden die gleichen Hidden Classes und deren Übergänge.
  • 41. 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.
  • 42. 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
  • 44. 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.
  • 45. Garbage Collection neu zugewiesener Speicher langlebige Objekte Speicheraufteilung: Die meisten Objekte haben nur eine sehr kurze Lebensspanne. young generation old generation
  • 46. 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.
  • 47. Garbage Collection Je weniger Objekte verschoben werden müssen, desto schneller ist die young generation Garbage Collection.
  • 48. 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.
  • 49. JavaScript Engines Also: Werden Strukturen mehrmals verwendet, greifen viele Optimierungen der Engine.
  • 50. Repaints & Reflows Tim Reckmann / pixelio.de
  • 51. 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.
  • 52. 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.
  • 53. 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
  • 54. 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
  • 57. 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.
  • 58. Memory Leaks Globale Variablen Vergessene Intervalle DOM-Knoten in Datenstrukturen Closures
  • 59. 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
  • 62. 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.
  • 63. 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
  • 64. 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.
  • 66. 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).
  • 67. 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
  • 68. 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/
  • 70. 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" />
  • 72. KONTAKT Sebastian Springer sebastian-springer@maibornwolff.de MaibornWolff GmbH Theresienhöhe 13 80339 München @basti_springer https://github.com/sspringer82