nicht angemeldet
Benchmark createElement() vs Document.write()
Hi nochmals,
Ich wollte wissen, welche Methode schneller HTML Elemente erzeugt.
In der linken Ecke :
Die Herausvorderer "createElement()" - "appendChild()"
In der rechten Ecke:
Die Titelverteidiger "document.write()" - "Str +="
der Code :
<html>
<head>
<title>createElement() vs. document.write() </title>
<script type="text/javascript" >
function _main_(){
var a = 50; var b = 150;
alert ("NODE");
var start1 = new Date();
node(a,b); // createElement()
var end1 = new Date();
alert ("HTML");
var start2 = new Date();
write(a,b); // document.write()
var end2 = new Date();
alert ("createElement()\t:" + (end1 - start1) + "\n" + "document.write()\t:" + (end2 - start2));
}
function node(a,b) {
var A_Tag = document.createElement("div");
A_Tag.style.width = 500;
A_Tag.style.border = "solid red 1px";
for ( var n = 0 ; n < a ; n++ ) {
var B_Tag = document.createElement("div");
A_Tag.appendChild(B_Tag);
for ( var i = 0 ; i < b ; i++ ) {
var C_Tag = document.createElement("span");
var C_Txt = document.createTextNode(i + "-" + n);
C_Tag.Id = "sp" + i + "-" + n;
C_Tag.appendChild(C_Txt);
B_Tag.appendChild(C_Tag);
}
}
document.getElementById("bench_1").appendChild(A_Tag);
/* delete A_Tag;
delete B_Tag;
delete C_Tag;
delete C_Txt; */
}
function write(a,b) {
var A_Str = "<div style='width:500; border:solid red 1px ;' >";
for ( var n = 0 ; n < a ; n++ ) {
A_Str += "<div>";
for ( var i = 0 ; i < b ; i++ ) {
A_Str +="<span id='sp" + i + "-" + n + "' >" + i + "-" + n + "</span>";
}
A_Str +="</div>";
}
A_Str += "</div>";
document.write (A_Str);
delete A_Str
}
</script>
</head>
<body>
<span id="bench_1" ></span>
<span id="bench_2" >
<script type="text/javascript" >
_main_();
</script>
</span>
</body>
</html>
Kommentare Bitte
-
Meine Resultate -[1.333 Athlon C * 256RAM/133MHz * WinXp prof * iE6.0]
createElement() : document.write()
[a=10 b=100] - 230 : 50
[a=50 b=50 ] - 570 : 341
[a=31 b=100] - 721 : 731
[a=100 b=100] - 2303 : 15122 <- !!!Scheinbar tut sich die createElement - Methode mit großen Schleifen recht leicht. Jedoch werden 100*100er Tags in der Realität selten vorkommen. Bei kleinen Schleifen ist das String zusammen stöpseln eindeutig im Vorteil auch wenn die Lesbarkeit darunter leidet.
Diskussions Anregung:
* Ist für euch die Geschwindigkeit des Seitenaufbaus beim Client ein Thema ?
* Html-Tags aus Strings erzeugen +/- ?
* Mit Notes arbeiten +/- ?Ich freue mich auf eure Antworten
GREETINGS
-kanu