Avatar billede phliplip Nybegynder
27. september 2006 - 16:23 Der er 28 kommentarer og
1 løsning

Spørgsmål om optimering

Hej Exp'er!

Lige en lille hurtig..

Hvilken version af denne funktion er mest optimal, hurtigst og mindst resource krævende?

function clearList() {
  var t = document.getElementById(listId);
  for(var y = (t.rows.length-1); 0 <= y; y--) {
    t.deleteRow(y);
  }
}

eller

function clearList() {
  for(var y = (t.rows.length-1); 0 <= y; y--) {
    document.getElementById(listId).deleteRow(y);
  }
}

Forskellen ligger i at jeg i den første har t som 'peger på' document.getElementById(listId) og i den anden lader jeg den bare kalde document.getElementById(listId) for hver loop!
Avatar billede softspot Forsker
27. september 2006 - 16:49 #1
F.s.v.a. Internet Explorer: Den først burde i teorien være hurtigst, da du undgår at slå op i et globalt objekt (document), hver gang du itererer for at slette en række.

Jeg ved ikke om samme regler gør sig gældende i andre browsertyper (det må afhænge af hvor intelligent den enkelte javascript-fortolker er til at optimere den kode den genererer).
Avatar billede mclemens Nybegynder
27. september 2006 - 17:48 #2
Softspot kast et svar ;)

...

Phliplip >> Til at teste hastigheden kan du køre denne

Med første script:
16ms - IE , 31ms - FF

Med andet script.
47ms - IE , 47ms FF


... og så lige det tredje ;)
16ms - IE , 0ms FF



<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="content-type" content="text/html; charset=iso-8859-1"><title>Ingen titel</title>

<style type="text/css">

</style>

<script type="text/javascript">
window.onload=function(){

t1=new Date().getTime();



  var t = document.getElementById("test");
  for(var y = (t.rows.length-1); 0 <= y; y--) {
    t.deleteRow(y);
  }




/*
  var t = document.getElementById("test");
  for(var y = (t.rows.length-1); 0 <= y; y--) {
    document.getElementById("test").deleteRow(y);
  }
*/



/*
  var t=document.getElementById("test");
  while(t.childNodes.length>0)t.removeChild(t.firstChild);
*/


alert(new Date().getTime()-t1);

}
</script>

</head><body>

<table id="test">
<tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr><tr><td>0</td></tr></table>
</body></html>
Avatar billede mclemens Nybegynder
27. september 2006 - 17:57 #3
Hov, med hensyn til den tredje test så sagde både
IE og FF 0 ms ... det var en copy'n'paste smutter ...
(øg evt. med flere tr's for bedre test resultat sammenligning)
Avatar billede mclemens Nybegynder
27. september 2006 - 17:59 #4
(den vil dog tage noget tid om lige at starte siden
op ved mange table-rows - tælleren tæller kun fra det
punkt siden er loadet og til elementerne er fjernet)
Avatar billede phliplip Nybegynder
27. september 2006 - 21:09 #5
Tak for svarene ;)

mclemens: Kan du ikke lige helt præcisere tiderne på metode 3? Det lyder lidt vildt hvis den skulle være SÅ hurtig, for så skal jeg da igang med at lave noget kode om :D
Avatar billede softspot Forsker
27. september 2006 - 21:33 #6
Grunden til at målingen viser nul er at funktionen getTime kun kan hente tider i intervaller i størrelsen 15/16 ms (hvis du lægger mærke til målingerne ligger de allesammen omkring noget der er deleligt med 15-16 stykker). At et resultat viser 0 ms betyder altså ikke, at det ikke har taget nogen tid, men bare at det er gået hurtigere end funktionen kunne nå at måle, men det er jo også fint nok at koden kører hurtigere end 15 ms :)
Avatar billede mclemens Nybegynder
27. september 2006 - 21:35 #7
Hmmm... joh vi laver lige en anden test... :D
( den varierede lidt hos mig mellem 0ms og 16ms
- den kunne ikke rigtig bestemme sig til hastigheden da
js har svært ved at måle så hurtig en hastighed :D )

[ øg evt. med flere tr's for bedre test resultat sammenligning ]
- For at få en præcis måling på 3'eren skal der være en hel del tr
elementer i tabellen ... Vi bruger derfor dette script til at
lave 5000 tr elementer i en tabel vi opretter ...

... Metode 3 er dom og de to andre har jeg ikke lært ...
- Du kan evt. prøve testen som den er i 27/09-2006
17:48:25 og indsætte en hel masse tr elementer ...
(skift /* og */ i den afhængig af om du vil køre 1, 2 eller 3)



... kommer lige med et andet test script ...
Avatar billede mclemens Nybegynder
27. september 2006 - 21:35 #8
Update, nåh softspot kom så med forklaringen :o)
Avatar billede mclemens Nybegynder
27. september 2006 - 21:50 #9
Jeg forstår ikke lige hvorfor IE ikke vil køre 3'eren via. dette script :/
... Men prøv 27/09-2006 17:48:25 med en masse tr elementer ...


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="content-type" content="text/html; charset=iso-8859-1"><title>Ingen titel</title>

<style type="text/css">

</style>

<script type="text/javascript">
window.onload=function(){

  a0=document.getElementById("test")

for(i=0;i<1000;i++){
  a1=a0.firstChild.cloneNode(true);
  a0.appendChild(a1);
}

var tester=prompt("Skriv typen 1-3");
setTimeout("dd("+tester+");",100);
}



function dd(t){


t1=new Date().getTime();


if(t==1){
  var t = document.getElementById("test");
  for(var y = (t.rows.length-1); 0 <= y; y--) {
    t.deleteRow(y);
  }
}


if(t==2){
  var t = document.getElementById("test");
  for(var y = (t.rows.length-1); 0 <= y; y--) {
    document.getElementById("test").deleteRow(y);
  }
}



if(t==3){
  var t=document.getElementById("test");
  while(t.childNodes.length>0)t.removeChild(t.firstChild);
}


alert(new Date().getTime()-t1);

}
</script>

</head><body>
<table id="test"><tr><td>0</td></tr></table>
</body></html>
Avatar billede mclemens Nybegynder
27. september 2006 - 22:20 #10
Nu fik jeg testen til at virke og
det var et lidt blandet resultat :/

Test 1:
IE 63ms
FF 531ms

Test 2:
IE 687ms
FF 593ms

Test 3:
IE 375ms
FF 219ms


... Umiddelbart ser test 1 ud
til at være bedst i IE, mens test 3
ser bedst ud i FF ... men da man havde oprettet
den manuelt som i 27/09-2006 17:48:25 og lagde en
masse tr elementer ind fik jeg nogle andre målinger... Hmm :/








<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="content-type" content="text/html; charset=iso-8859-1"><title>Ingen titel</title>

<style type="text/css">

</style>

<script type="text/javascript">
window.onload=function(){

aa=document.createElement("table");
aa.setAttribute("id","test");
a0=document.createElement("tbody");

for(i=0;i<2000;i++){
  a1=document.createElement("tr");
  a2=document.createElement("td");
  a3=document.createTextNode("aaaa");
  a2.appendChild(a3);
  a1.appendChild(a2);
  a0.appendChild(a1);
}

aa.appendChild(a0);
document.body.appendChild(aa);

var tester=prompt("Skriv typen 1-3");
dd(tester);
}



function dd(t){

t1=new Date().getTime();


if(t==1){
  var t = document.getElementById("test");
  for(var y = (t.rows.length-1); 0 <= y; y--) {
    t.deleteRow(y);
  }
}


if(t==2){
  var t = document.getElementById("test");
  for(var y = (t.rows.length-1); 0 <= y; y--) {
    document.getElementById("test").deleteRow(y);
  }
}



if(t==3){
  var t=document.getElementById("test").firstChild;
  for(i=0,i2=t.childNodes.length;i<i2;i++)t.removeChild(t.childNodes[0]);
}


alert(new Date().getTime()-t1);

}
</script>

</head><body>

</body></html>
Avatar billede mclemens Nybegynder
27. september 2006 - 22:25 #11
Manuelt oprettet som i 27/09-2006
17:48:25 får jeg disse målinger:

Test 1:
IE 63ms
FF 672ms

Test 2:
IE 890ms
FF 703ms

Test 3:
IE 1844ms
FF 313ms


... Så jeg tog fejl 3'eren duer ikke,
den snød mig bare - undskylder ;)
Avatar billede mclemens Nybegynder
27. september 2006 - 22:40 #12
Hmmm, så kørte jeg en igen og
så - så det modsat ud igen :/
... Jeg havde sat tbody ind ved tesningen af
27/09-2006 17:48:25 sidste gang og den ødelagde det ???

27/09-2006 22:25:29 er 27/09-2006 17:48:25 med 2000 tr's og en tbody

Denne her er 2000 tr's uden en tbody ...

Test 1:
IE 63ms
FF 656ms

Test 2:
IE 907ms
FF 735ms

Test 3:
IE 32ms
FF 15ms


... Softspot har du en ide om hvorfor en tbody ødelagde min test i
27/09-2006 22:25:29 - med hensyn til test nr. 3 var eneste forskel:

<table id="test"> vs. <table id="test"><tbody>

og scriptet:

  var t=document.getElementById("test");
  while(t.childNodes.length>0)t.removeChild(t.firstChild);

vs.

  var t=document.getElementById("test").firstChild;
  while(t.childNodes.length>0)t.removeChild(t.firstChild);

(tr's ved begge målinger så sådan her ud: <tr><td>aaaa</td></tr>)
Avatar billede softspot Forsker
27. september 2006 - 22:41 #13
Og for at give et mere retvisende billede af hvordan kode performer, er det en god i idé at lave flere (mange) genkørsler af testen, da der kan være belastning af maskinen på nogle tidspunkter og ikke på andre. Jo færre forstyrrende faktorer der er desto mere retvisende bliver resultatet af testen.

En kommentar til måden at oprette dynamiske tabeller (det gælder fsv. også oprettelse af andre elementer i DOM), så er det, aht. memoryleaks i IE, bedre at tilføje elementer top down, dvs. direkte i DOM-træet, frem for at tilføje indefra og opefter (for til sidst at tilføje hele underhierarkiet til dokumentet). Det er også bedre for performance. Jeg er klar over at det ikke er højrelevant for koden i disse tests, men i.o.m. dette spørgsmål drejer sig om performace, kan man jo tage det med sig i baggagen som en anden mulighed for at optimere sin kode (i det mindste i IE).
Avatar billede mclemens Nybegynder
27. september 2006 - 22:50 #14
Ok, takker jeg tror også jeg sidder og belaster mit pc lidt for meget p.t. :)
- Rart nok med det at oprette og tilføje samtidig fra toppen af og nedefter
... jeg vidste ikke det med memory leaks i IE det eneste jeg havde læst var
det inde på http://developer.mozilla.org/en/docs/Traversing_an_HTML_table_with_JavaScript_and_DOM_Interfaces

... Husk at lægge et svar Softspot :)

- M.h.t. 3'eren får i andre gode eller dårlige målinger i 27/09-2006 17:48:25
ved flere tr elementer ... jeg studser nu lidt over det tbody problem :/
Avatar billede softspot Forsker
27. september 2006 - 22:52 #15
27/09-2006 22:40:23 >> jeg er ikke helt sikker på hvordan DOM'en bliver opbygget, men jeg var af den opfattelse at en tabel altid har en tbody, uanset om den angives i HTML-koden eller ej. Men hvis det passede, så burde din kode fejle begge gange, da childNodes til table-elementet jo så ville være tbody (gange det antal der nu måtte være, samt thead og tfoot).

Derfor hælder jeg lidt til at DOM'en bliver opbygget på grundlag af den faktiske HTML, dvs. childNodes afspejler de nodes som HTML-koden foreskriver til et givent element, herunder table-elementet. Så hænger det sammen igen... :)

Det med at der altid er tbody (eller rettere tbodies-collection) på en table, har nok noget med table-objekter i DOM'en at gøre - men jeg er noget usikker på om dette rent faktisk er forklaringen...
Avatar billede mclemens Nybegynder
27. september 2006 - 23:00 #16
- Ok det forklarer forskellen, nu fangede jeg det - du har helt ret :D
1'eren er den bedste så, den eneste grund til at 3'eren virkede hurtig
var at den bare fjernede tbody elementet - og det var så derfor at jeg
forskellen imellem den ene måling og den anden :)


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="content-type" content="text/html; charset=iso-8859-1"><title>Ingen titel</title>

<script type="text/javascript">
window.onload=function(){alert(document.getElementById("test").firstChild.tagName);}
</script>

</head><body>
<table id="test"><tr><td>aaaa</td></tr></table>
</body></html>
Avatar billede mclemens Nybegynder
27. september 2006 - 23:01 #17
edit: og det var så derfor at jeg (havde) forskelle(n)
Avatar billede softspot Forsker
27. september 2006 - 23:02 #18
For lige at gøre min kommentar vedr. top-down tilføjelse af elementer færdig, så ville jeg påstå koden her performer bedre og er mindre leaky:

window.onload = function() {
  var doc = document;

  aa = document.createElement("table");
  aa.setAttribute("id","test");
  a0 = document.createElement("tbody");

  doc.body.appendChild(aa);
  aa.appendChild(a0);

  for(i = 0; i < 2000; i++){
    a1 = doc.createElement("tr");
    a2 = doc.createElement("td");
    a3 = doc.createTextNode("aaaa");
    a0.appendChild(a1);
    a1.appendChild(a2);
    a2.appendChild(a3);
  }

  var tester = prompt("Skriv typen 1-3");
  dd(tester);
}

Bemærk en anden optimering er at holde en lokal variabel som peger på document. Dette er for at undgå opslag efter globale variable, som også skulle være en langsommere operation end at aflæse en lokal variabel (igen noget med IE og ActiveX, dvs. COM-objekter).

Og for lige at præcisere: Nej, jeg har ikke selv siddet og testet mig frem til dette - men jeg har googlet lidt og fundet flg. link om memoryleaks i IE: http://msdn.microsoft.com/library/default.asp?url=/library/en-us/ietechcol/dnwebgen/ie_leak_patterns.asp, samt andre links vedr. optimering (som jeg desværre ikke lige kan finde i øjeblikket, men såvidt jeg husker var det noget med, det nu hedengangne, online-magazin "DHTML Dude" eller sådan noget).
Avatar billede mclemens Nybegynder
27. september 2006 - 23:09 #19
Mange, mange tak for link og forklaring :)
Avatar billede softspot Forsker
27. september 2006 - 23:15 #20
Anytime! Jeg suger og sprøjter hvor jeg kan :D
Avatar billede mclemens Nybegynder
27. september 2006 - 23:18 #21
Hehe, du mangler stadig at lægge dit svar...

phliplip >> Afvis lige mit svar - jeg blev
helt rundt på gulvet af det auto tbody ...
Avatar billede softspot Forsker
27. september 2006 - 23:21 #22
Nej, stop nu mclemens! Du skal da have (alle) point for dine fine tests og dokumentation af hvordan man selv finder ud af hvad der er bedst - test er en sund manøvre og det har du introduceret.

Jeg klarer mig uden point i denne omgang - ellers tak :)
Avatar billede mclemens Nybegynder
27. september 2006 - 23:27 #23
Når du synes så ok :)
Avatar billede phliplip Nybegynder
28. september 2006 - 08:53 #24
Jeg tror sq jeg tager alle points selv :-P Det' gas!

I skal have rigtigt mange tak for jeres fine indspark, jeg tror at denne tråd kan blive meget hjælpsom for andre i fremtiden ;)
Avatar billede phliplip Nybegynder
28. september 2006 - 08:54 #25
Er konklusionen så at jeg skal holde mig til metode1 eller hvad?
Avatar billede mclemens Nybegynder
28. september 2006 - 09:04 #26
Ja, metode 1 :)
... Og tak for point :D
Avatar billede olebole Juniormester
28. september 2006 - 11:40 #27
<ole>

softspot >> I eksemplet (27/09-2006 23:02:44) kunne du speede tingene endnu mere op ved at nøjes med at konstruere én række. Derefter kunne du i løkken klone og append'e denne med:
    row = ROW_ELEMENT.cloneNode(true);
    TBODY_ELEMENT.append(row);

/mvh
</bole>
Avatar billede softspot Forsker
28. september 2006 - 11:44 #28
olebole >> cool! Det er fedt at få alle detaljerne med - tak :)
Avatar billede mclemens Nybegynder
28. september 2006 - 12:13 #29
^ Jeps, meget lækkert - takker også :)
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester