Einiges zum Thema JavaScript Performance
Damit die eigene Javascript Anwendung effizient läuft und eine gute Performance hat, muss man bei der Programmierung schon auf gewisse Dinge achten. Es gibt diverse Falltricks und Code Konstrukte, die Javascript ausbremsen und den Browser verlangsamen. Damit dies vermieden werden kann, habe ich hier einige interessante Informationen und Links zu dem Thema "Javascript Performance" aufgeführt.
Die folgenden Regeln bieten eine kleine Übersicht, die zur Verbesserung der Performance beitragen können.
- Reduce Activity in Loops
- Reduce DOM Access (read/write)
- Reduce DOM Size
- Avoid Unnecessary Variables
- Avoid Inline-Scripts
- Delay JavaScript Loading
- Avoid Using the
withkeyword
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 den 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, dass jedes Mal im DOM nach dem Element gesucht werden muss.
Beim Schreiben im HTML DOM sollte einem bewusst sein, dass 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 den DOM nur einmal neu aufbauen und die Seite neu zeichnen.
Dasselbe 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 Javascript vermeiden wie z.B. <body onload="init()"> oder <input onclick="foobar();">
Delay JavaScript Loading (defer)
Javascripte wenn möglich am Ende der Seite einfügen, damit der Browser zuerst den HTML und CSS Code lesen kann. Wenn man viele Javascript Dateien nutzt, sollte man prüfen, ob man diese nicht erst später bei Bedarf in die Seite einbindet. Weiterhin kann das Ladeverhalten der Javascript 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 Javascript Dateien aus. Es kann ja sein, dass 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, dass 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 Tipps & Tricks, die man beachten sollte. Ich sammle diese erst mal hier stichpunktartig. Es sind erstmal nur Ideen. Evtl. sind einige davon sogar Schwachsinn und erfordern ein genaueres Auswerten durch einen 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 Performance
- Javascript Effizienz - Artikel auf mediaevent.de
- Optimizing JavaScript code - from Google Developers
- Speeding up JavaScript: Working with the DOM - from Google Developers
Buchtipp
Unterstütze meine Arbeit: Einige Links in diesem Beitrag sind Affiliate-Links. Wenn darüber etwas gekauft wird, unterstützt du meine Seite – ohne Mehrkosten für dich. Vielen Dank!
Schreibe einen Kommentar