Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Making your JavaScript faster

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

Pascal Precht

October 24, 2011
Tweet

More Decks by Pascal Precht

Other Decks in Programming

Transcript

  1. @

  2. Scope Chains foo [[Scope]] Scope Chain 0 Global document (object)

    window (object) navigator (object) Inspired by Nicholas Zakas
  3. 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
  4. Ausführungskontext Ausführungskontext [[Scope]] Scope Chain 0 1 Global document (object)

    window (object) navigator (object) Inspired by Nicholas Zakas
  5. 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
  6. Auflösung der Lookups !   Startet in der Scope Chain

    an Position 0 !   ... Sucht weiter in Position 1 !   ... Position 2 !   .. !   .
  7. 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
  8. 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
  9. Closures (anonym) [[Scope]] Scope Chain 0 1 Global document (object)

    window (object) navigator (object) Activation Object this window arguments array Inspired by Nicholas Zakas
  10. 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
  11. Was ist zu tun? !   Lokale variablen verwenden !

      with-Statements vermeiden !   Vorsicht bei der Verwendung von try-catch !   Closures nur sparsam verwenden
  12. Property-Tiefen !   object.name ist schneller als object.name.name !  

    Je tiefer die Verschachtelung, desto langsamer der Zugriff
  13. 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
  14. Was macht die Performance aus? !   Anzahl der Iteration

    !   Vorgehensart der Iteration !   Prozesse innerhalb der Iteration
  15. 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
  16. HTMLCollection Objects !   HTMLCollections sind „lebendig“ !   Werden

    automatisch geupdatet, wenn sich das darunter liegende DOM verändert
  17. ... !   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
  18. Was ist zu tun? !   Zugriff auf HTMLCollection Objects

    minimieren !   Bei mehreren Zugriffen auf eine Eigenschaft, diese zwischenspeichern
  19. Reflow !   Initialer Page Load !   Browser-Fenster Veränderung

    !   Hinzufügen/Entfernen von DOM-Knoten !   Veränderung im Layout Style !   Abfragen von Layout-Informationen
  20. 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
  21. 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!