innerHTML Austausch langsam

[karl001]

Hallo,
ich habe ein Problem mit innerHTML. Und zwar wenn ich eine grössere Rückgabe von meinem Server hab (ich schätze mal so 3000 Elemente mit maximal 30 Zeichen Text Inhalt) und diese per AJAX (DIV und innerHTML) in meine Webseite einbinde (altes DIV wird ersetzt) dauert dies sehr lange (ca 1000 ms nur das Austauschen). Ich habe bereits gegooglet und replaceHTML gefunden, womit es eigentlich schneller gehen soll, aber das tut es nicht. Per reinem DOM Austausch hab ich es auch schon versucht, dies dauert aber nur noch länger. Sowohl im FF und IE dauert es recht lang. Ich weiss echt so langsam nicht mehr weiter, weiss jemand woran dies noch liegen könnte?
MfG

[ein schlauer]

Hast du's schon mal mit einem documentFragment probiert?

[kkapsner]

documentFragment kennt kein innerHTML...

[hesst]

documentFragment kennt kein innerHTML...

der schlaue meint sicher per dom, aber ich vermute dass hier, rein durch die js-laufzeit, innerHTML schneller ist.
per dom fügst du ja jedes element per js ein.

[kkapsner]

Ich vermute ja schwer, dass alleine die Übertragungszeit schon viel ausmacht.

[ein schlauer]

Nein, ich meine documentFragement

[hesst]

Nein, ich meine documentFragement

ja, hatte ich auch so verstanden, nur musst du die 3000 elemente auch dort einfügen?!

[kkapsner]

Ja - aber das kennt kein innerHTML. Da musst du dir zusätzlich ein DIV/o.Ä. erzeugen - da mit innerHTML alles reinschreiben und dann alle Elemente von dort in das documentFragment rüberschaufeln.
K.A. ob das schneller ist (hab' gerade meine Umgebung nicht zur Verfügung). Aber documentFragment umgeht eigentlich nur das Problem des wiederholten Renderns der Seite beim einfügen vieler Elemente per DOM - aber bei innerHTML bin ich der Meinung, dass sowieso nur ein Rerender ausgeführt wird (kann mich aber auch täuschen)... und in dem Link wird auch gezeigt, dass v.A. das Löschen der Elemente viel Zeit braucht (per DOM löschen kann da etwas schneller sein - war in meinem Test abhängig von der Anzahl der Elemente).

[karl001]

Die Antworten kommen ja flott ^^
Also was mir beim Testen aufgefallen ist: Wenn ich die grosse Tabelle (das, was ich einfüge) ohne INPUT Felder mache geht es in einem Bruchteil der Zeit (ca 1/4). Mit INPUT-Feldern (2 pro Zeile) dauert es sehr lange.

[kkapsner]

Test doch mal, wie lange es dauert, bis du überhaupt zu deinem .innerHTML = kommst.
Hast du mal einen Testlink?

[karl001]

Also ich benutze Firebug und wenn ich das div=innerHTML auslagere in eine extra Methode dauert nur diese so lange. Der Ajax Request an sich dauert keine 20 ms. Wobei man sagen muss dass alles sehr schwankt von der Abfragezeit, von 600 ms - 1000 ms, obwohl die ganze Sache lokal abläuft.
Edit: Nein ich habe leider keinen Testlink, läuft alles intern.

[hesst]

ich habe mal den test von hier http://forum.jswelt.de/javascript/49...tml#post314360 (Erfahrung mit DOMAssistant ?)
umgebaut. 5000 elemente in ein div:

------------------IE7:-------------FF 3.5.8:------------Opera 9.10
innerHTML:________31_______________83___________________31
documentFragment:_235______________103__________________47
document:_________4500_____________183__________________63

jetzt mal mit 5000 input-elementen
innerHTML:________78_______________1331_________________31

scheint so, als hätte der FF da probleme

EDIT: das divs ist zw 2 tests bereinigt worden

[karl001]

Okay, danke für den Test. Dann scheinen wir das Problem ja eingegrenzt zu haben. Wenn ich jetzt noch eine Lösung hätte wär ich gänzlich zufrieden

[hesst]

was soll es da für eine lösung geben? du kannst noch versuchen, wie der schlaue schon sagte, dies mal per documentFragement zu lösen und testen ob der ff da schneller ist. was anderes fällt mir jedenfalls nicht ein

[karl001]

Habs jetzt mal mit documentFragment versucht. Ist nicht wesentlich schneller, vielleicht 5%. Aber bei über 600ms hilft mir das nicht sonderlich weiter. So langsam bin ich echt mit meinem Latein am Ende. Es ist ja nicht nur der FF, auch der IE hat ne ewige Verzögerung. Es scheint dass es daran liegt, dass der auszutauschende String zu lang ist und daher die JavaScript Engine kurz überlastet was einen kurzen Freeze zur Folge hat.
Habs jetzt mal auf nem schnelleren Rechner ausprobiert, da gehts auch um einiges schneller, ca 200 ms. Ich wüsste aber nicht wie ich das Austauschen noch performanter könnte gestalten.