Making your JavaScript faster

A talk about performance issues in JavaScript and how to make it better.

Inspired by:
Presentation by Nicholas Zakas: http://www.slideshare.net/nzakas/speed-up-your-javascript
Presentation by Zach Holman:
http://zachholman.com/talk/a-documentation-talk

Transcript

1. Making your JavaScript Faster By Pascal Precht
2. @PascalPrecht
3. @
4. #pascal_precht_ist_so _klasse_ich_bin_total _beeindruckt_von_sein em_talk_ihr_solltet_ih m_auf_twitter_folgen
5. Das Problem (früher)
7. Langsam!!
8. Langsam!!
9. Langsam!!
10. Langsam!!
11. Langsam!!
12. Langsam!!
13. Langsam!! Tracemonkey/ JaegarMonkey (3.5+) V8 Alle Chakra (9+) Nitro (4+) Karakan (10.5+)
14. Langsam!! Tracemonkey/ JaegarMonkey (3.5+) V8 Alle Chakra (9+) Nitro (4+) Karakan (10.5+)
15. Das Problem (heute)
16. Es ist immer noch möglich langsames JavaScript zu schreiben.
17. Der Browser kümmert sich nicht um euren Code!
19. Performance Probleme in JavaScript
20. Performance Probleme in JavaScript
21. Performance Probleme in JavaScript !  Scope
22. Performance Probleme in JavaScript !  Scope !  Datenzugriff
23. Performance Probleme in JavaScript !  Scope !  Datenzugriff !  Schleifen
24. Performance Probleme in JavaScript !  Scope !  Datenzugriff !  Schleifen !  DOM
25. Performance Probleme in JavaScript !  Scope !  Datenzugriff !  Schleifen !  DOM !  Zugriff
26. Performance Probleme in JavaScript !  Scope !  Datenzugriff !  Schleifen !  DOM !  Zugriff !  Reflow
27. Scope
29. Scope Chains foo [[Scope]] Inspired by Nicholas Zakas
30. Scope Chains foo [[Scope]] Scope Chain 0 Inspired by Nicholas Zakas
31. Scope Chains foo [[Scope]] Scope Chain 0 Global document (object) window (object) navigator (object) Inspired by Nicholas Zakas
32. Was passiert, wenn diese Funktion ausgeführt wird?
33. 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
34. Ausführungskontext Ausführungskontext [[Scope]] Inspired by Nicholas Zakas
35. Ausführungskontext Ausführungskontext [[Scope]] Scope Chain 0 1 Inspired by Nicholas Zakas
36. Ausführungskontext Ausführungskontext [[Scope]] Scope Chain 0 1 Global document (object) window (object) navigator (object) Inspired by Nicholas Zakas
37. 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
38. Auflösung der Lookups !   Startet in der Scope Chain an Position 0 !   ... Sucht weiter in Position 1 !   ... Position 2 !   .. !   .
39. Je länger die Scope Chain, desto langsamer die Auflösung!
40. Weitere Probleme
41. Weitere Probleme !   with-Statement !   Das catch eines try-catch-Blocks
42. Beide fügen ein weiteres Objekt der Scope Chain zu!
43. 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
44. 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
45. Closures
47. Closures (anonym) [[Scope]] Scope Chain 0 1 Global document (object) window (object) navigator (object) Activation Object this window arguments array Inspired by Nicholas Zakas
48. 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
49. Was ist zu tun? !   Lokale variablen verwenden !   with-Statements vermeiden !   Vorsicht bei der Verwendung von try-catch !   Closures nur sparsam verwenden
50. Performance Probleme in JavaScript ! Scope !  Datenzugriff !  Schleifen !  DOM !  Zugriff !  Reflow
51. Wo greifen wir auf Daten zu?
52. Literale
53. Variablen
54. Objekteigenschaften
55. Array Items
56. Zugriffe auf lokale Variablen und Literale sind am schnellsten!
57. Property-Tiefen !   object.name ist schneller als object.name.name !   Je tiefer die Verschachtelung, desto langsamer der Zugriff
58. 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
59. Performance Probleme in JavaScript ! Scope ! Datenzugriff !  Schleifen !  DOM !  Zugriff !  Reflow
60. for-Schleifen
61. while-Schleifen
62. do-while-Schleifen
63. Perfomance-Unterschiede?
64. Nein.
65. Was macht die Performance aus? !   Anzahl der Iteration !   Vorgehensart der Iteration !   Prozesse innerhalb der Iteration
69. 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
70. Performance Probleme in JavaScript ! Scope ! Datenzugriff ! Schleifen !  DOM !  Zugriff !  Reflow
71. DOM is evil
72. Probleme beim Zugriff aufs DOM
73. Das DOM selbst!
74. DOM-Zugriff !   DOM ist getrennt von der JavaScript-Engine implementiert !   DOM-Zugriffe sind teuer
77. HTMLCollection Objects
78. HTMLCollection Objects !   HTMLCollections sind „lebendig“ !   Werden automatisch geupdatet, wenn sich das darunter liegende DOM verändert
79. ... !   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
81. x 68
85. Was ist zu tun? !   Zugriff auf HTMLCollection Objects minimieren !   Bei mehreren Zugriffen auf eine Eigenschaft, diese zwischenspeichern
86. Reflow
88. Reflow !   Initialer Page Load !   Browser-Fenster Veränderung !   Hinzufügen/Entfernen von DOM-Knoten !   Veränderung im Layout Style !   Abfragen von Layout-Informationen
90. Reflow!
91. DocumentFragment
92. 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
94. Reflow!
96. Reflow!
97. 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!