Scriptaculous - nicht immer sinnvoll!

Fertige Frameworks sind schon eine Tolle Sache. Ich verwende Sie auch gern und oft. Allerdings kann es manchmal auch sein, dass sie extrem viel Zeit bei der Ausführung kosten. Dies habe ich beim JavScript-Framework Scriptaculous zu spüren bekommen.

Aufgabe: Eine Tabelle mit 20000 Zeile mit je einer Spalte ins HTML-DOM schreiben.

Lösung 1: Mit Scriptaculous

table = Builder.node('table', {border: '1'});
for (var i = 0; i <= 20000; i++)
{
  tr = Builder.node('tr');
  td = Builder.node('td');
  tr.appendChild(td);
  table.appendChild(tr);
}
document.getElementsByTagName('body')[0].appendChild(table);

Lösung 2: "Per Hand"

table = document.createElement('table');
table.setAttribute('border','1');
for (var i = 0; i <= 20000; i++)
{
  tr = document.createElement('tr');
  td = document.createElement('td');
  tr.appendChild(td);
  table.appendChild(tr);
}
document.getElementsByTagName('body')[0].appendChild(table);

Beide Lösungen liefern dasselbe Ergebnis - nur eben in einer unterschiedlichen Zeit. Getestet habe ich das mit meinem Apple iMac (Mac OS X 10.5 / 2.33 GHz Intel Core 2 Duo) und verschiedenen Browsern. Verwendet habe ich Scriptaculous in der aktuellen Version 1.8.0 inklusive Prototype 1.6.0.

Das Ergebnis

Bowser	Mit Scriptaculous	"Per Hand"
Firefox 2.0.0.9	9 Sekunden	2 Sekunden
Safari 3.0.4	2 Sekunden	1 Sekunde
Opera 9.24	15 Sekunden	4 Sekunden

Wie man sieht ist die Lösung über das Scriptaculous-Framework immer langsamer. Und was lernen wir daraus? Nicht immer blind auf die Funktionalitäten die uns ein Framework bietet vertrauen!

Ich bin natürlich auch an anderen "Zeitmessungen" interessiert. Bitte einfach als Kommentar dazuschreiben. Wäre doch mal interessant!

Hier können sich alle Interessierten meine Testdateien herunterladen: Download (32.9 KB)

Oder lieber live ausprobieren?

• Beispiel mit Scriptaculous
• Beispiel "per Hand"