Heiner Lamprecht: Verarbeiten von XML Daten langsam

Beitrag lesen

Hallo Heiner,

ich arbeite gerade an einer JavaScript-Applikation, die unter anderem eine XML-Liste mit relativ vielen Elementen runterlädt und verarbeitet.  Dabei habe ich festgestellt, dass der Firefox deutlich schneller arbeitet als der IE.

Mal dahingeraten: Hat Deine XML-Liste womöglich eine DTD? Eine interne oder gar eine externe?

Nein.  DTD wird nicht verwendet.

Mein Haupt-Problem ist eigentlich nicht, dass das Bearbeiten der Daten so lange dauert, sondern, dass der Browser in der Zeit nichts anderes tut.  Er zieht 100% CPU und man kann nichts anderes nebenher tun.

Ansonsten wäre natürlich ein Beispiel Deines jetzigen JS-Quellcodes und eventuell der zu verarbeitenden XML-Daten sinnvoll.

Die XML Datei sieht grob so aus:

---------------------------------------------------------------
<?xml version="1.0"?>
<List>
    <CreatedAt>123456789</CreatedAt>
    <Entry id="abc" t="0" n="bla fasel" s="ABCD" lt="50,123"
       ln="10,543" c="17" h="25" m="293645" />
    <Entry id="def" t="1" n="foo" s="POIU" lt="51,323"
       ln="9,1422" c="51" h="47" m="412145" />
    <Entry id="asw" t="0" n="bar" s="ASWE" lt="49,164"
       ln="10,142" c="82" h="103" m="203477" />
</List>
---------------------------------------------------------------

Von den Entry-Tags gibt es ziemlich viele.  Die Werte lt und ln werden benutzt, um Icons in der Seite zu positionieren (Positionen in einer verschiebbaren Karte).  Der Rest dient dazu, die Icons auszuwählen und eine Art Tooltipp zu erzeugen.

Die Verarbeitung sieht dann grob so aus:

---------------------------------------------------------------
var content = '';
var tagList = xmlDocument.getElementsByTagName("Entry");
var listCount = tagList.length;

for(var i = 0; i < listCount; i++)
{
  var pos = tagList.item(i);
  var posData = new Array();

posData[pos.attributes[0].nodeName] = pos.attributes[0].nodeValue;
  posData[pos.attributes[1].nodeName] = pos.attributes[1].nodeValue;
  posData[pos.attributes[2].nodeName] = pos.attributes[2].nodeValue;
  posData[pos.attributes[3].nodeName] = pos.attributes[3].nodeValue;
  posData[pos.attributes[4].nodeName] = pos.attributes[4].nodeValue;
  posData[pos.attributes[5].nodeName] = pos.attributes[5].nodeValue;
  posData[pos.attributes[6].nodeName] = pos.attributes[6].nodeValue;
  posData[pos.attributes[7].nodeName] = pos.attributes[7].nodeValue;
  posData[pos.attributes[8].nodeName] = pos.attributes[8].nodeValue;

...
Hier kommen jetzt ein paar Berechnungen.
Auskommentieren hat keine nennenwerten Auswirkungen auf
die Performance
...

content += "\n<img src="" + __ICON_PATH__ + imgName + ""
    onclick="getDetails('" + posData['id'] + "');" id="" + id +
    "" " + "style="position: absolute; top: " +
    (parseInt(pos['y']) - iconOffset) + "px; " +
    "left: " + (parseInt(pos['x']) - iconOffset) +
    "px; z-index: " + layer + ";" " +
    "onmouseover="showLabel('" + posData['n'] + "','" +
    posData['s'] + "','" + posData['c'] + "','" +
    posData['h'] + "','" + posData['m'] + "', this)" " +
    "onmouseout="hideLabel();"/>";

layer++;

}

document.getElementById(p_Layer).innerHTML = content;
---------------------------------------------------------------

Ich habe ein paar Dinge weggelassen.  Aber wie gesagt, diese Sachen wirken sich nicht wirklich auf die Performance aus.  Wenn ich es auskommentiere, geht es insgesamt ca 5% schneller.

Bin für Ideen jederzeit offen.

Ich würde mich dem JSON-Vorschlag übrigens anschliessen.

Dann sollte ich mir das wohl wirklich mal anschauen :-)

Heiner