Making your JavaScript faster

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)

6. None

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!

18. None

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

28. None

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

46. None

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
66. None
67. None
68. None

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
75. None
76. None

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
80. None

81. x 68

82. None
83. None
84. None

85. Was ist zu tun? !   Zugriff auf HTMLCollection Objects

    minimieren !   Bei mehreren Zugriffen auf eine Eigenschaft, diese zwischenspeichern

86. Reflow

87. None

88. Reflow !   Initialer Page Load !   Browser-Fenster Veränderung

    !   Hinzufügen/Entfernen von DOM-Knoten !   Veränderung im Layout Style !   Abfragen von Layout-Informationen
89. None

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
93. None

94. Reflow!

95. None

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!
98. None