Einiges zum Thema JavaScript Performance

Javascript,

Damit die eigene Anwendung effizient läuft und eine gute hat, muss man bei der Programmierung schon auf gewisse Dinge achten. Es gibt diverse Falltricks und Code Konstrukte die aus­brem­sen und den Browser verlangsamen. Damit dies vermieden werden kann, habe ich hier einige interessante Informationen und Links zu dem Thema " " aufgeführt.

Die folgenden Regeln bieten ein kleine Übersicht die zur Verbesserung der beitragen können.

  1. Reduce Activity in Loops
  2. Reduce DOM Access (read/write)
  3. Reduce DOM Size
  4. Avoid Unnecessary Variables
  5. Avoid Inline-Scripts
  6. Delay JavaScript Loading
  7. Avoid Using the with keyword

Reduce Activity in Loops

Loops und Schleifen sollten nicht unnötig lang sein. Je Schleifendurchlauf sollten so wenig Aktionen wie möglich erfolgen.

Reduce DOM Access (read/write)

Der Zugriff auf den HTML DOM Baum ist relativ langsam. Sowohl beim lesenden als auch beim schreibende Zugriff sollte man gewisse Regeln befolgen.

Beim Zugriff auf dem HTML DOM sollte wenn man mehrmals auf ein Element zugreifen möchte, dieses zuerst geholt werden und in einer lokalen Variable gespeichert werden.  Der weitere Zugriff erfolgt dann über diese Variable. Somit wird vermieden das jedes mal im DOM nach dem Element gesucht werden muss.

Beim schreiben im HTML DOM sollte einem bewusst sein, das nach jedem einfügen eines neuen Elementes der Browser den DOM-Baum komplett neu aufbauen und die Seite neu zeichnen muss. Will man z.B. ein Element mit mehreren Kind-Elementen im DOM einfügen, sollte man erst die Kind-Elemente zu dem Element hinzufügen und dann das eigentliche Element im DOM einfügen. Somit muss der Browser dem DOM nur einmal neu aufbauen und die Seite neu zeichnen.

Das selbe gilt auch für das einfügen und ändern von Texten  und CSS-Styles. Daher sollte man zuerst die Texte und die CSS-Styles einfügen und anschließend das Element in dem HTML DOM.

Reduce DOM Size

Die Anzahl der Elemente im HTML DOM sollten nicht zu viel werden. Ein kleiner DOM verkürzt die Ladezeit der Seite und sorgt dafür, das der Browser die Seite schneller rendern kann.

Avoid Unnecessary Variables

Unnötig viele Variablen sollten vermieden werden. Man sollte also nicht jede Kleinigkeit eine eigene Variable verpassen. Bei Textverkettungen neigt man wegen der Übersichtlichkeit  meistens dazu.
z.B. schreibt man öfters mal so etwas:

var name = vorname + ' '+ nachname; 
var content = anrede + ' ' + name;
$('#box').html(content);

besser wäre es so gelöst

$('#box').html(anrede + ' ' + vorname + ' ' + nachname);

Avoid Inline-Scripts

Inline vermeiden wie z.B. <body onload="init()"> oder <input onclick="foobar();">

Delay JavaScript Loading

Javascripte wenn möglich am Ende der Seite einfügen, damit der Browser zuerst den HTML und CSS Code lesen kann. Wenn man viele Dateien nutzt, sollte man prüfen ob man diese nicht erst später bei bedarf in die Seite einbindet. Weiterhin kann das Ladeverhalten der Dateien auch mit dem Attribut defer="true" beeinflussen werden. Der Browser lädt nämlich immer erst die Seite und führt dann erst die geladenen Datein aus. Es kann ja sein, das in der Datei Code vorhanden ist, der die Seite manipuliert und/oder Ausgaben erzeugt wie z.B. document.write(). Mit defer="true" bringt man den Browser dazu die Javascript Datei sofort auszuführen, ohne auf das laden und parsen der Seite zu warten. Dies kann man tun wenn man sicher ist das keine Ausgabe zu erwarten ist.

Avoid Using the with keyword

Das Schlüsselwort with sollte vermieden werden. Es wirkt sich sehr stark auf die Geschwindigkeit von Javascript aus. Im strict mode ist es zudem eh nicht erlaubt. Daher kann man getrost darauf verzichten.

weitere Regeln

Es gibt noch weitere Tips & Tricks die man beachten sollte. ich sammle diese erst mal hier Stichpunktartig. In nächster Zeit werde ich dann genauer darauf eingehen. Evtl. sind einige davon sogar Schwachsinn und erfordern ein genaueres Auswerten mit  Benchmark damit die Aussagen auch ihre Gültigkeit haben.

  • RegEx Pattern die in Schleifen Verwendung finden, sollten vor der Schleife in einer Variable ausgelagert werden.
  • "eval is evil" oder doch nicht?
  • Event Handler sparsam verwenden. Nur auf das horchen, was gebraucht wird.
  • Unnötigen Code vermeiden, Code für den Produktivbetrieb verkleinern (minifizieren) und Gzip komprimiert ausliefern.
  • Animationen sind aufwändig und bremsen aus. Durch die neue Möglichkeit Animationen mit CSS3 zu realisieren, kann man lieber damit Animationen umsetzen.

Weitere Links zum Thema Javascript Effizienz und

Folgende Artikel könnten auch interessieren