Optimierungspotenzial erkennen

Sie wissen, dass Ihre Applikation besser performen könnte. Doch wo genau liegt das Optimierungspotenzial? Um das herauszufinden, sollten Sie verschiedene Profiling-Methoden nutzen.

Darüber erhalten Sie Auskunft, welche Teile des Codes von einem Umarbeiten am meisten profitieren könnten. Das ist wichtig, weil unnötige Änderungen am Code meistens einen negativen Einfluss auf die Wartungstauglichkeit haben - der Code wird womöglich unnötig aufgebläht und dadurch unübersichtlich.

Methode 1: JavaScript-Profiling

Die Performance von JavaScript hat einen starken Einfluss darauf, wie flüssig sich eine Webapplikation "anfühlt" und wie reaktionsfreudig sie tatsächlich ist. JavaScript-Profiler geben einen Überblick über die Performance der Applikation auf Skript-Level. Sie messen die Zeit, die jede einzelne Funktion von Anfang bis Ende der Ausführung benötigt. Für Google Chrome ist die Nutzung des Profiles Panel innerhalb der Developer-Tools zu empfehlen. Für Firefox gibt es das bekannte Add-on Firebug. Mit dem Online-Tool jsPerf lassen sich JavaScript-Snippets schnell und einfach auf Performance testen, indem man sie in ein Webformular einfügt.

Für die richtige Interpretation der Ergebnisse aller JavaScript-Profiler muss man wissen: Während sie die Ausführungszeit der einzelnen Funktionen messen, berechnen die Profiler indirekt auch die Ausführungszeit für DOM-Operationen. Gerade diese Kommandos sind oft der Kern für mögliche Performance-Verbesserungen, wie wir im Folgenden noch sehen werden. Schauen Sie sich zum Beispiel folgenden Code an:

function drawArray(array) {

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

document.getElementById('test').innerHTML += array[i];

}

}

Im Prinzip wird hier so gut wie keine Zeit für die Ausführung von JavaScript benötigt. Dennoch wird ein JavaScript-Profiler für die Funktion eine lange Ausführungszeit ermitteln - ganz zu Recht, weil die Funktion mit dem DOM in einer die Performance schwächenden Weise interagiert.