Dr.Web - Das Online Magazin für Seitenbetreiber

Mehr Performance für JavaScript

AJAX als Synonym für XML und JavaScript machte das Web 2.0 erwachsener und interaktiver. Kaum ein modernes Online-Projekt verzichtet heute auf diese Technologie. Wir zeigen die besten und durch Erfahrung gesammelten Tipps für einfache, aber effektive Optimierung von JavaScript.

Keep it simple
Nachfolgende Empfehlungen für kürzere Ausführungszeiten sind keine weltbewegenden Erfindungen oder komplexen Funktionsaufrufe. Gekonnt eingesetzt, sind diese schlichten Codezeilen eine wahre Goldgrube und bringen messbaren Performance-Schub mit sich. Der Browser und sein Herrchen werden es danken.

1. new Function() gegen function() tauschen

Alt

 element.onclick = new Function("...")

Neu

      element.onclick = function("...")

2. eval(), with() und try-catch meiden

Alt

      return eval("document.forms[0]." + field);

Neu

      return document.forms[0][field];

Alt

      with(document.forms[0]) {
  alert(elements.length);
}

Neu

      var form = document.forms[0];
alert(form.elements.length);

Alt

      try {
  ...
} catch() {
  ...
}

Neu

      if () {
  ...
} else {
  ...
}

3. Variablen nach Möglichkeit lokal setzen

Alt

      var a, b = 1;
function test() {
  var c = a + b;
}

Neu

      function test() {
  var a, b = 1;
  var c = a + b;
}

4. for-in nur wenn Array-Key keine fortlaufende Nummer ist

Alt

      for (var i in array) {
  alert(array[i]);
}

Neu

      var length = array.length;
for (var i = 0; i < length; i ++) {
  alert(array[i]);
}

5. Keine Strings als Parameter bei setTimeout() und setInterval()

Alt

      setInterval("func()", 10000)

Neu

      setInterval(func, 10000)

Alt

      setTimeout("func(" + value + ")", 10000)

Neu

      setTimeout (function() {func(value)}, 10000)

JavaScript komprimieren
Gern empfehle ich an dieser Stelle das Tool für die Komprimierung der JavaScript-Dateien. Hinter dem JavaScript-Kompressor verbirgt sich ein simples Prinzip: JS-Code eingeben, auf die gewünschte Komprimierungsart klicken und das selektierte Ergebnis rauskopieren. Fertig. (tm)