Paul: createElement im IE langsam

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.

  1. 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

    --
    RFC 2324, Satz 7 (Sicherheit): Jeder, der zwischen meinem Kaffee und mir steht, gilt als unsicher.
    1. innerHTML

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

  2. [latex]Mae  govannen![/latex]

    for(var i = 0; i &lt; 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

    --
    ~~~ stur lächeln und winken, Männer ~~~
    Dank Hixies Idiotenbande geschieht grade eben wieder ein Umdenken
    in Richtung "Mess up the Web".(suit)
    SelfHTML-Forum-Stylesheet
    1. ... 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!