createElement im IE langsam

[Paul]

Moin.
Ich erstelle mir per DOM <option>'s für ein <select>. Im Firefox läuft dies in ca. 0,4 Sek. durch was gerade noch so ertragbar ist. IM IE8 dauert das ganze dann stolze 2 Sekunden.
Wie kann ich den IE tunen?

[code lang=javascript]<select id="meineID"></select>

<script type="text/javascript">
    // generates the option tags
    var en = 'Hier,sind,meine,Werte,in,einem,String,per,Komma,getrennt';
    var enT = 'Hier,sind,meine,Namen,in,einem,String,per,Komma,getrennt';
    var e = en.split(',');
    var eT = enT.split(',');
    for(var i = 0; i &lt; e.length; i++) {
        var option = document.createElement("option");
        // value des option
        var value = document.createAttribute("value");
        value.nodeValue = e[i];
        option.setAttributeNode(value);
        // inhalt des option
        var text;
        if(eT[i] &amp;&amp; (eT[i].length > 0)) text = document.createTextNode(e[i]+' --- '+eT[i]);
        else text = document.createTextNode(e[i]);
        option.appendChild(text);
        // option an select haengen
        var select = document.getElementById('meineID');
        select.appendChild(option);
    }
</script>[code]
PS: die Werte kommen als String an. Das frisst aber nicht die Performance.

[LX]

Sobald man mehr als 2-3 Elemente hat, ist innerHTML tatsächlich schneller als createElement und createTextNode. Viele Toolkits speichern ein virtuelles div, welches nicht im body eingehängt ist, in dem sie per innerHTML ihre HTML-Strukturen erzeugen, um diese per insertBefore/appendChild aus dem div heraus einzuhängen. Dabei muss man natürlich darauf achten, dass man sich im jeweils gleichen DOM bewegt, d.h. über die Grenzen von (i)frames hinaus klappt das nicht.

Gruß, LX

[Paul]

innerHTML

Ich arbeite mit XML-Dateien die ich per xslt transformiere. Also geht innerHTML leider nicht. Trotzdem Danke.

[Kai345]

[latex]Mae  govannen![/latex]

for(var i = 0; i < e.length; i++) {

Micro-Optimierung:
Hier berechnest du bei jedem Schleifendurchlauf e.length, was nur bei Schleifen notwendig ist, in denen e verändert wird. Ansonsten legt man das beispielsweise in den ersten Ausdruck der Schleife:

for (var i = 0, len = e.length; i < len; i++)

var option = document.createElement("option");
        // value des option
        var value = document.createAttribute("value");
        value.nodeValue = e[i];
        option.setAttributeNode(value);

Besser:

var option = document.createElement("option");  
option.value = e[i];

oder aber direkt mit new Option() arbeiten.

Was davon schneller ist, mußt du testen, kann ich gerade nicht.

// option an select haengen
        var select = document.getElementById('meineID');

Diese Referenz mußt du nicht in jedem Schleifendurchgang neu ermitteln. Mach das vor der Schleife.

Cü,

Kai

[Paul]

... Schleifendurchlauf e.length ...

Bringt leider nur marginal etwas, da es zwar einige dutzend <select>'s sind aber in denen jeweils "nur" einige dutzend <option>'s sind.

option.value = e[i];[/code]

Bringt ein paar wenige 10tel (und weniger Code)

oder aber direkt mit new Option() arbeiten.

Ist meines Eachtens langsamer als option.value

Diese Referenz mußt du nicht in jedem Schleifendurchgang neu ermitteln. Mach das vor der Schleife.

Das war's! Nun kommt der IE an die Geschwindigkeit des FF heran. Danke!