nodeValue oder innerText - im IE - zu viel CPU Zeit

[Kermit]

Hi,

beim Versuch den Inhalt einer Tabelle dynamisch zu ändern
mit nodeValue oder innerText braucht IE zu viel  CPU Zeit.
Ich rufe aus einem Applet eine Javascript Funktion die den
Inhalt der Tabelle
dynamisch verändert. Das funktioniert noch gut wenn es
nicht zu viele Änderungen gleichzeitig sind.
Da es um eine Tabelle mit Börsendaten sich handelt die zu
viele Veränderungen gleichzeitig hat steigt beim IE die
CPU Auslastung bis zu 100%. Im Netscape sieht es besser
aus.
Wenn ich diese Textänderung in Javascript auskommentiere
geht die CPU Zeit wider runter.
Es liegt eindeutig an diese beide Aufrufe (nodeValue oder
innerText). Ich habe mit beide probiert mit den gleichen
Effekt.
Ich vermute das der IE beim jeden Aufruf die Tabelle neu
rendert und schaut ob er die Tabelle nicht größer machen
muss. Ich habe auch in jeden td Tag eine feste Breite
(width) definiert, nutzt aber nichts.

Wenn jemand eine Idee hat wäre ich ihn sehr dankbar.
Vielen Dank und Gruß
Kermit

hier noch die js function

function setCont(p1,p2,p3,p4) {
 Elem = getElem(p1,p2,p3);
 ElemFirstChild = Elem.firstChild
 if(DOM && Elem && ElemFirstChild) {

// wenn ich hier den return ausführe ist die CPU Zeit normal
//return Elem;
      ElemFirstChild.nodeValue = p4;
    } else if(MS && Elem) {
      Elem.innerText = p4;
    } else if(NS && Elem) {
       Elem.document.open();
       Elem.document.write(p4);
       Elem.document.close();
    }
    return Elem;
}

[Bio]

Sup!

Der IE ist halt ein Stück Codemüll. Was erwartet man da? Und vor allem: Was sollten wir Dir jetzt konstruktives antworten? Wenn der IE Open Source Software wäre, könnten wir evtl. einen Patch schreiben - aber so?

Gruesse,

Bio

[Kermit]

:))) JA ist ein Stück Codemüll ... ich werde nie mehr auf Netscape schimpfen ;) vesprochen!! ... es geht nur darum ob mann
vieleicht eine andere Lösungsansatz für mein Problem hat. Ich brauche Idden.

ciao
Kermit

[Thomas Meinike]

Hallo,

Da es um eine Tabelle mit Börsendaten sich handelt die zu
viele Veränderungen gleichzeitig hat steigt beim IE die
CPU Auslastung bis zu 100%. Im Netscape sieht es besser
aus.

Ich habe mal einen Test mit 300 td-Zellen gemacht, die im 5-Sekunden-Takt mit Zufallszahlen gefuellt werden: http://www.styleassistant.de/test/zz2table.htm und bewusst einen etwas aelteren Rechner verwendet (200 MHz MMX, 128 MB, W2KSP3).

Mit IE 5.5 ergibt sich periodisch 100%-CPU-Last waehrend es Mozilla 1.2.1 auf 82% bringt.

MfG, Thomas

[Kermit]

Hallo Thomas,

ich habe mit deine Tabelle angeschaut. Es scheint so al ich nicht der einzige währe der dieses Problem hatte.
Kennst du die Gründe dafür?
Hast du vielleicht auch Alternative gefunden um eine Tabelle so dynamisch zu verändern?
Ich würde auch eine für M$ Proprietäre Lösung bauen wenn es notwendig wäre.

Mfg
Kermit

[Thomas Meinike]

Hallo,

Hast du vielleicht auch Alternative gefunden um eine Tabelle so dynamisch zu verändern?
Ich würde auch eine für M$ Proprietäre Lösung bauen wenn es notwendig wäre.

Ich habe gerade nochmal etwas getestet und Mozilla reagiert offenbar ebenso wie der IE, schlaegt immer wieder bei 100% an.

Man koennte vielleicht die Tabelle mit display: none bzw. display: table (block fuer den IE) aus und einblenden. Bei der Datenmenge, die da "on the fly" ins DOM geschaufelt wird, kommt jeder Browser ins Schwitzen ...

MfG, Thomas

[Kermit]

ich habe da ein anderen Vorschlag und zwar ich setze mit innerHTML
die ganze Tabelle auf ein Mal in der Seite hinein. Das hat der Vorteil das der Browser es nur ein Mal zeichnen muss. Die Lösung
blinkt leider im Netscape.

<script language="JavaScript" type="text/javascript">
  <!--

var _x  =10
  var _y  =30
  var width =80
  var height =30
  function ZZ2Table()
  {
   var elem = document.getElementById("myDiv");
   var src="<table>";
   for (y=0;y<_y;y++) {
    src += "<tr>";
    for (x=0;x<_x;x++)
    {
     src += "<td width="+ width +" height="+ height +">"+ Math.round(Math.random()*100000) +"</td>";
    }
    src += "</tr>\n";
   }
   src +="</table>"
   elem.innerHTML = src;
  }

//-->
  </script>
...

<DIV id="myDiv">
<table>
...
</table>
</DIV>

[Zapp]

Hallo Thomas,

Ich habe mal einen Test mit 300 td-Zellen gemacht, die im 5-Sekunden-Takt mit Zufallszahlen gefuellt werden: http://www.styleassistant.de/test/zz2table.htm und bewusst einen etwas aelteren Rechner verwendet (200 MHz MMX, 128 MB, W2KSP3).

Ich habe dein Beispiel mal etwas verändert:

----------------------------------------------
<script language="JavaScript" type="text/javascript">
<!--

function init()
{
   data=new Array();
   for(i=0;i<document.getElementsByTagName("td").length;i++)
     data[i]=document.getElementsByTagName("td")[i].firstChild;
}

function ZZ2Table()
{
  for(i=0;i<data.length;i++)
  {
    data[i].nodeValue=Math.round(Math.random()*100000);
  }
}

//-->
</script>
</head>
<body onload="init();ZZ2Table();setInterval('ZZ2Table()',5000);">
----------------------------------------------

Bei mir (IE5.5/win98) wird die CPU-Last dadurch deutlich reduziert.

Außerdem habe ich die Erfahrung gemacht, dass man DOM-Zugriffe zum Teil erheblich beschleunigen kann, wenn man die Objekte noch mal im lokalen Scope der Funktion definiert, also z.B:

function ...
  var obj=document.getElementsByTagName("td");
  var objL=obj.length;
  for(i=0;i<objL;i++)
    obj[i] ...

Der Effekt fällt umso mehr ins Gewicht, je komplexer der Elementenbaum ist, und ist im IE5 besonders ausgeprägt.
Sogar dieses objL bringt manchmal noch was; sonst wird offenbar bei jedem Schleifendurchlauf die Länge des Arrays wieder neu abgefragt, da sie sich ja geändert haben könnte.

Grüße, Stefan

[Thomas Meinike]

Hallo,

Ich habe dein Beispiel mal etwas verändert:
...
Bei mir (IE5.5/win98) wird die CPU-Last dadurch deutlich reduziert.

Danke, mein Beispiel war auch nur dafuer gedacht, mal mit einem großen Datensatz zu operieren. Optimierungen waren da nicht angedacht.

Mit Deiner Erweiterung gehen auf dem genannten System der IE 5.5 auf 70% und Mozilla auf 90% Last zurueck.

MfG, Thomas

[Zapp]

Hallo Thomas,

Danke, mein Beispiel war auch nur dafuer gedacht, mal mit einem großen Datensatz zu operieren. Optimierungen waren da nicht angedacht.

Das habe ich wohl verstanden. Mein Hinweis war auch eigentlich für Kermit gedacht, nur hatte der ja nicht so ein schönes Beispiel.

Mit Deiner Erweiterung gehen auf dem genannten System der IE 5.5 auf 70% und Mozilla auf 90% Last zurueck.

... was aber ja nichts aussagt, wenn man nicht weiß, wie lange die Last vorher auf 100% war. Vergleicht man am konkreten Beispiel die Zeit, die die Funktion zur Ausführung braucht, ergibt sich im Mozilla eine Beschleunigung etwa um den Faktor 2-3, Opera7 und IE6 sind etwa 8-10x schneller, IE5 15-20x.
Solche Werte sind natürlich nicht immer zu erreichen, aber wenn man an schnellem Code interessiert ist, sind solche DOM-Zugriffe in einer Schleife oft ein guter Ansatzpunkt.

Grüße, Stefan

[Thomas Meinike]

Hallo,

Mit Deiner Erweiterung gehen auf dem genannten System der IE 5.5 auf 70% und Mozilla auf 90% Last zurueck.

... was aber ja nichts aussagt, wenn man nicht weiß, wie lange die Last vorher auf 100% war.

Ich meinte die Spitzenlast nach jeweils 5 Sekunden, wenn nur das Sytem und der jeweilige Browser nebst Script laufen. Das Script erzeugt beim Funktionsaufruf reproduzierbar jeweils ein Peak-Maximum in der Taskmanager-Systemleistung-Anzeige.

MfG, Thomas