JavaScript/Tutorials/Performance-Optimierung

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

JavaScript ist als langsame Programmiersprache verrufen. Allerdings wurden in den letzten Jahren sowohl der Funktionsumfang der Sprache einerseits als auch die Rendering Engines der Browser soweit verbessert, sodass dies heute nicht mehr zutrifft.

In diesem Artikel werden Ihnen moderne Programmiertechniken und Tricks vorgestellt, mit denen Sie schnelle und performante Skripts entwickeln können.

Inhaltsverzeichnis

[Bearbeiten] Frameworks

Früher mussten, selbst nach dem Ende des JScript-Experiments, Fallunterscheidungen für verschiedene Browser durchgeführt werden, sodass der Einsatz von Frameworks wie jQuery, die einheitliche Funktionalität zur Verfügung stellten, eine Notwendigkeit war. Mittlerweile sind viele der DOM-Manipulationen auch mit nativen Funktionen möglich. Ohne den Überbau zusätzlicher Bibliotheken sind diese schneller als die entsprechenden Methoden im Framework.[1]

Empfehlung: Überlegen Sie, ob Sie wirklich den Funktionsumfang eines Frameworks wie jQuery benötigen, oder mit Vanilla-JS auskommen.

[Bearbeiten] Programmiertipps

[Bearbeiten] Variablen

Vermeiden Sie nicht initialisierte Variablen, die Sie als Magic Number notiert haben:

Beispiel
// schlecht: 
setTimeout(blastOff, 86400000);
 
// gut:
const MILLISECONDS_IN_A_DAY = 86400000;
 
setTimeout(blastOff, MILLISECONDS_IN_A_DAY);

Werte, die sich später nicht mehr ändern sollen, sind Konstanten und keine Variablen. Sie können mit dem Schlüsselwort const deklariert werden.

Empfehlung: Verwenden Sie sprechende Namen , die auch Jahre später noch aussagekräftig sind.

[Bearbeiten] Funktionen

Funktionen sind Unterprogramme, in denen optimalerweise eine Aufgabe bearbeitet wird.

Empfehlung:
  • Halten Sie Funktionen einfach. Sie sollten im Idealfall nur eine Aufgabe übernehmen und können so beliebig wiederverwendet werden.
  • Vermeiden Sie Code-Duplikate und lagern Sie bestimmte wiederkehrende Abläufe in Funktionen aus. So ist es einfacher sie zu debuggen und gegebenenfalls später einmal zu verändern.

[Bearbeiten] DOM-Manipulationen

Wenn Sie mit createElement neue Elemente erzeugen und dann mit appendChild einhängen, wird jedes Mal das DOM des Dokuments neu aufgebaut, Elemente müssen neu positioniert und gerendert werden. Dies kann bei mehreren Elementen zu Geschwindigkeitseinbußen führen.

Empfehlung:

Wenn Sie mehrere Elemente dynamisch erzeugen, erzeugen Sie erst die Kindelemente und fügen diese in das Elternelement ein, dass Sie dann mit appendChild in das Dokument einhängen.
Wenn Sie mehrere Elemente als Geschwister (siblings) einhängen wollen, können Sie ein Fragment erzeugen und dieses dann einhängen: document.createDocumentFragment();
Genauso sollten Sie mit Stil- und Klassenzuweisungen verfahren.

Mittlerweile hat es sich wohl herumgesprochen, dass Änderungen an der Darstellung nicht über das (womöglich mehrfache) Setzen der style-Eigenschaft, sondern über eine Änderung von Klassen vorgenommen wird.

Empfehlung: Trennen Sie konsequent Markup (HTML), Präsentation (CSS) und Verhalten (JavaScript). Alle Angaben zur Darstellung sollten via CSS erfolgen. Bei Bedarf ändern Sie lediglich die Klassenzugehörigkeit der entsprechenden Elemente mithilfe der JavaScript-Eigenschaften:

[Bearbeiten] String Konkatenation

Einige (ältere) Quellen empfehlen das Zusammenfügen vor allem längerer Strings nicht mit dem Rechenoperator +, sondern mit array.join. Während dies für IE5-7 wohl zutraf, sind heutige Browser auch in der lesbareren Variante schneller.[2]

Beispiel
"string1" + variable + "string2";
 
//ist genauso schnell wie
 
["string1", variable, "string2"].join("");

[3] [4] [5]

[Bearbeiten] fertige Scripte optimieren

[Bearbeiten] komprimieren

JavaScript-Code enthält üblicherweise Kommentare und Whitespace. Sie können diese durch ein Programm oder online entfernen und so ihre Scripte um 30-70% komprimieren.[6]

Natürlich existieren auch Programme, um komprimierten Code wieder zu entpacken und zu verschönern:

[Bearbeiten] Lint

Mit ESlint können Sie Ihren Code linten, d.h. auf Richtigkeit prüfen. So werden nicht initialisierte Variablen und andere Schwachstellen erkannt.

[Bearbeiten] Quellen

  1. sitepoint: Native JavaScript Equivalents of jQuery Methods: the DOM and Forms
  2. String concat methods test
  3. desalasworks: 25 Techniques for Javascript Performance Optimization
  4. webreference.com javascript
  5. google developers: Optimizing JavaScript
  6. David Wlash: Better Compression with UglifyJS

Siehe auch:


Meine Werkzeuge
Namensräume

Varianten
Aktionen
Übersicht
Index
Mitmachen
Werkzeuge
Spenden
SELFHTML