Making your JavaScript faster

Slide 1

Slide 1 text

Making your JavaScript Faster By Pascal Precht

Slide 2

Slide 2 text

@PascalPrecht

Slide 3

Slide 3 text

Slide 4

Slide 4 text

#pascal_precht_ist_so _klasse_ich_bin_total _beeindruckt_von_sein em_talk_ihr_solltet_ih m_auf_twitter_folgen

Slide 5

Slide 5 text

Das Problem (früher)

Slide 6

Slide 6 text

No content

Slide 7

Slide 7 text

Langsam!!

Slide 8

Slide 8 text

Langsam!!

Slide 9

Slide 9 text

Langsam!!

Slide 10

Slide 10 text

Langsam!!

Slide 11

Slide 11 text

Langsam!!

Slide 12

Slide 12 text

Langsam!!

Slide 13

Slide 13 text

Langsam!! Tracemonkey/ JaegarMonkey (3.5+) V8 Alle Chakra (9+) Nitro (4+) Karakan (10.5+)

Slide 14

Slide 14 text

Langsam!! Tracemonkey/ JaegarMonkey (3.5+) V8 Alle Chakra (9+) Nitro (4+) Karakan (10.5+)

Slide 15

Slide 15 text

Das Problem (heute)

Slide 16

Slide 16 text

Es ist immer noch möglich langsames JavaScript zu schreiben.

Slide 17

Slide 17 text

Der Browser kümmert sich nicht um euren Code!

Slide 18

Slide 18 text

No content

Slide 19

Slide 19 text

Performance Probleme in JavaScript

Slide 20

Slide 20 text

Performance Probleme in JavaScript

Slide 21

Slide 21 text

Performance Probleme in JavaScript !  Scope

Slide 22

Slide 22 text

Performance Probleme in JavaScript !  Scope !  Datenzugriff

Slide 23

Slide 23 text

Performance Probleme in JavaScript !  Scope !  Datenzugriff !  Schleifen

Slide 24

Slide 24 text

Performance Probleme in JavaScript !  Scope !  Datenzugriff !  Schleifen !  DOM

Slide 25

Slide 25 text

Performance Probleme in JavaScript !  Scope !  Datenzugriff !  Schleifen !  DOM !  Zugriff

Slide 26

Slide 26 text

Performance Probleme in JavaScript !  Scope !  Datenzugriff !  Schleifen !  DOM !  Zugriff !  Reflow

Slide 27

Slide 27 text

Scope

Slide 28

Slide 28 text

No content

Slide 29

Slide 29 text

Scope Chains foo [[Scope]] Inspired by Nicholas Zakas

Slide 30

Slide 30 text

Scope Chains foo [[Scope]] Scope Chain 0 Inspired by Nicholas Zakas

Slide 31

Slide 31 text

Scope Chains foo [[Scope]] Scope Chain 0 Global document (object) window (object) navigator (object) Inspired by Nicholas Zakas

Slide 32

Slide 32 text

Was passiert, wenn diese Funktion ausgeführt wird?

Slide 33

Slide 33 text

Ausführung der Funktion !   Es wird ein Ausführungskontext erzeugt !   ... kopiert die Member der Function Object Scope Chain in seine eigene Scope Chain !   Activation Object wird erzeugt welches alle lokalen Variablen enthält !   Activation Object wird an den Anfang der Scope Chain gepusht

Slide 34

Slide 34 text

Ausführungskontext Ausführungskontext [[Scope]] Inspired by Nicholas Zakas

Slide 35

Slide 35 text

Ausführungskontext Ausführungskontext [[Scope]] Scope Chain 0 1 Inspired by Nicholas Zakas

Slide 36

Slide 36 text

Ausführungskontext Ausführungskontext [[Scope]] Scope Chain 0 1 Global document (object) window (object) navigator (object) Inspired by Nicholas Zakas

Slide 37

Slide 37 text

Ausführungskontext Ausführungskontext [[Scope]] Scope Chain 0 1 Global document (object) window (object) navigator (object) Activation Object this window arguments array Inspired by Nicholas Zakas

Slide 38

Slide 38 text

Auflösung der Lookups !   Startet in der Scope Chain an Position 0 !   ... Sucht weiter in Position 1 !   ... Position 2 !   .. !   .

Slide 39

Slide 39 text

Je länger die Scope Chain, desto langsamer die Auflösung!

Slide 40

Slide 40 text

Weitere Probleme

Slide 41

Slide 41 text

Weitere Probleme !   with-Statement !   Das catch eines try-catch-Blocks

Slide 42

Slide 42 text

Beide fügen ein weiteres Objekt der Scope Chain zu!

Slide 43

Slide 43 text

Innerhalb einer globalen Funktion Ausführungskontext [[Scope]] Scope Chain 0 1 Global document (object) window (object) navigator (object) Activation Object this window arguments array Inspired by Nicholas Zakas

Slide 44

Slide 44 text

Innerhalb von with/catch Ausführungskontext [[Scope]] Scope Chain 0 1 2 Global document (object) window (object) navigator (object) Activation Object this window arguments array Variable Object variable (value) Inspired by Nicholas Zakas

Slide 45

Slide 45 text

Closures

Slide 46

Slide 46 text

No content

Slide 47

Slide 47 text

Closures (anonym) [[Scope]] Scope Chain 0 1 Global document (object) window (object) navigator (object) Activation Object this window arguments array Inspired by Nicholas Zakas

Slide 48

Slide 48 text

Innerhalb der Closure Ausführungskontext [[Scope]] Scope Chain 0 1 2 Global document (object) window (object) navigator (object) Activation Object this window arguments array Activation Object this bar arguments [event] e (Event) Inspired by Nicholas Zakas

Slide 49

Slide 49 text

Was ist zu tun? !   Lokale variablen verwenden !   with-Statements vermeiden !   Vorsicht bei der Verwendung von try-catch !   Closures nur sparsam verwenden

Slide 50

Slide 50 text

Performance Probleme in JavaScript ! Scope !  Datenzugriff !  Schleifen !  DOM !  Zugriff !  Reflow

Slide 51

Slide 51 text

Wo greifen wir auf Daten zu?

Slide 52

Slide 52 text

Literale

Slide 53

Slide 53 text

Variablen

Slide 54

Slide 54 text

Objekteigenschaften

Slide 55

Slide 55 text

Array Items

Slide 56

Slide 56 text

Zugriffe auf lokale Variablen und Literale sind am schnellsten!

Slide 57

Slide 57 text

Property-Tiefen !   object.name ist schneller als object.name.name !   Je tiefer die Verschachtelung, desto langsamer der Zugriff

Slide 58

Slide 58 text

Was ist zutun? !   Globale Werte, wenn möglich, IMMER in den „lokalen“ Scope holen !   Objekteigenschaften, die mehrmals verwendet werden !   Array Items, die mehrmals verwendet werden !   Tiefe Eigenschaftsverschachtelungen vermeiden/minimieren

Slide 59

Slide 59 text

Performance Probleme in JavaScript ! Scope ! Datenzugriff !  Schleifen !  DOM !  Zugriff !  Reflow

Slide 60

Slide 60 text

for-Schleifen

Slide 61

Slide 61 text

while-Schleifen

Slide 62

Slide 62 text

do-while-Schleifen

Slide 63

Slide 63 text

Perfomance-Unterschiede?

Slide 64

Slide 64 text

Nein.

Slide 65

Slide 65 text

Was macht die Performance aus? !   Anzahl der Iteration !   Vorgehensart der Iteration !   Prozesse innerhalb der Iteration

Slide 66

Slide 66 text

No content

Slide 67

Slide 67 text

No content

Slide 68

Slide 68 text

No content

Slide 69

Slide 69 text

Was ist zu tun? !   Anzahl der Prozesse pro Iteration gering halten !   Anzahl der Iterationen gering halten !   Lookups während der Iteration vermeiden !   Kontrollvariable mit Kontrollbedingung kombinieren

Slide 70

Slide 70 text

Performance Probleme in JavaScript ! Scope ! Datenzugriff ! Schleifen !  DOM !  Zugriff !  Reflow

Slide 71

Slide 71 text

DOM is evil

Slide 72

Slide 72 text

Probleme beim Zugriff aufs DOM

Slide 73

Slide 73 text

Das DOM selbst!

Slide 74

Slide 74 text

DOM-Zugriff !   DOM ist getrennt von der JavaScript-Engine implementiert !   DOM-Zugriffe sind teuer

Slide 75

Slide 75 text

No content

Slide 76

Slide 76 text

No content

Slide 77

Slide 77 text

HTMLCollection Objects

Slide 78

Slide 78 text

HTMLCollection Objects !   HTMLCollections sind „lebendig“ !   Werden automatisch geupdatet, wenn sich das darunter liegende DOM verändert

Slide 79

Slide 79 text

... !   Sehen aus wie Arrays, sind es aber nicht !   ..repräsentieren das Ergebnis einer bestimmten Selektion (query) !   getElementById() !   getElementsByTagName() !   Selektion wird jedes Mal ausgeführt, sobald auf ein HTMLCollection Object zugegriffen wird

Slide 80

Slide 80 text

No content

Slide 81

Slide 81 text

x 68

Slide 82

Slide 82 text

No content

Slide 83

Slide 83 text

No content

Slide 84

Slide 84 text

No content

Slide 85

Slide 85 text

Was ist zu tun? !   Zugriff auf HTMLCollection Objects minimieren !   Bei mehreren Zugriffen auf eine Eigenschaft, diese zwischenspeichern

Slide 86

Slide 86 text

Reflow

Slide 87

Slide 87 text

No content

Slide 88

Slide 88 text

Reflow !   Initialer Page Load !   Browser-Fenster Veränderung !   Hinzufügen/Entfernen von DOM-Knoten !   Veränderung im Layout Style !   Abfragen von Layout-Informationen

Slide 89

Slide 89 text

No content

Slide 90

Slide 90 text

Reflow!

Slide 91

Slide 91 text

DocumentFragment

Slide 92

Slide 92 text

DocumentFragment !   Niemals Teil des DOM-Trees !   An DocumentFragment werden Elemente angehängt und entfernt !   DocumentFragment wird selbst an den DOM-Tree gehängt !   Reduziert die Anzahl der Reflows !   Funktioniert in allen Browsern

Slide 93

Slide 93 text

No content

Slide 94

Slide 94 text

Reflow!

Slide 95

Slide 95 text

No content

Slide 96

Slide 96 text

Reflow!

Slide 97

Slide 97 text

Was ist zu tun? !   Zugriffe auf style-Eigenschaften minimieren !   CSS-Klassen definieren und nur den Klassennamen ändern !   Zugriffe auf Layout-Informationen minimieren !   Wenn ein Wert mehrmals verwendet wird => lokal speichern!

Slide 98

Slide 98 text

No content