Performance-Optimierung bei der Programmierung mit Javascript

Hier ein paar Hinweise, wie man die Javascript-Performance im Browser etwas verbessern kann.

1. Lieber eine große DOM-Manipulation als viele kleine

Nicht gut:

var el = document.getElementById(id);

for(var I = 0; i<1000;i++){

      el.innerHTML += ‘<p>absatz</p>;

}

Besser:

var el = document.getElementById(id);

var string;

for(var i = 0; i<1000;i++){

     string += ‘<p>absatz</p>;

}

el.innerHTML = string;

2. Die Arbeit einer Schleife verkürzen

Bei langen Schleifen nicht jedesmal die Länge das Arrays (arr.length) ermitteln, sondern einmal am Anfang.

Nicht gut:

for(var i = 0; i<longArray.length;i++){

    // do Something

}

Besser:

var lengthOfLongArray = longArray.length;

for(var i = 0; i<lengthOfLongArray;i++){

    // do Something

}

3. Die Funktion eval() vermeiden

Besonders im Firefox ist diese Funktion, die quasi Strings in ausführbaren Quellcode umwandelt, sehr langsam.

Deswegen sollten möglichst wenig Code-Teile per Ajax geladen werden, weil sie alle durch diese Funktion laufen müssen, um aktiv zu werden. Am besten man beschränkt sich hier auf reine Daten, die z.B. im JSON-Format kodiert sind.