[qson]

Hej! Längesen man hängde här nu...
Jag gör en kalender (hotelliggare) som tidigare har skapats genom html-kod från php och skickats till klienten, nu är det omarbetning modell större på gång och tänkte då flytta renderingen till javascript istället. Jag har kommit långt tycker jag, men det tycker inte IE...
Min liggare funkar utmärkt i FF, och tar kanske 2 sekunder att bygga tabellen (f.n. ~ 100 rader och 30 kolumner). I IE6 däremot tar det 10-15 sekunder, och IE7 5-10s. Inga problem egentligen även om det är tröttsamt att vänta. (IE6 käkar ca 150MB vid detta tillfälle, FF ~80MB)
Problemet uppstår när jag uppdaterar eller lämnar sidan (klickar på en annan länk), då får jag ett antal frågor om jag vill tillåta skripten att fortsätta för att ie går långsamt, men jag har inga (mig veterligen) skript som kör när man lämnar sidan...

Info:
Använder Mootools för att skapa tabellen

new Element('td').inject(new Element('tr').inject(table));

Har inte testat debug i explorer än... tips på bra debug-program? MS Script debugger/MS Script Editor?

Oj. Mycket text... Jaja, ha det så länge!

[dAEk]

Du borde få betydligt bättre prestanda om du jobbar mot en container som inte är del av sidans DOM. Antingen en löst hängande DOM-nod eller ett fragment (document.createDocumentFragment()).

[martine]

Jag vet inte om det är lösningen du letar efter men det kanske går lite snabbare: använd XSLT från XML-dokumentet jag antar du har som grund. Även detta går att göra på klienten.

Explorers javascript-motor är tyvärr väldigt seg (med exempelvis Chrome eller Safari borde du få ännu snabbare resultat). Kanske fungerar IE bättre med element.innerHTML += '<tr>…</tr>' (bara en chansning). Jag själv skulle nog använda egna DOM-funktioner för att kunna optimera koden om jag inte skulle använda xsl.

[danjel]

har för mig att det är problem med minnesläckage med DOM manipulationer som dessa ..testa annars något stil med:
http://blog.markturansky.com/BetterJ...Templates.html
för att även få enklare underhåll av koden..

[qson]

Originally posted by dAEk@Apr 15 2009, 20:21
Du borde få betydligt bättre prestanda om du jobbar mot en container som inte är del av sidans DOM. Antingen en löst hängande DOM-nod eller ett fragment (document.createDocumentFragment()).

createDocumentFragment verkar inte finnas i explorer...

Ang. XSLT så har jag inte f.n. ett xml-dokument som grund. Mitt php-skript hämtar ur db och skriver JSON som sedan renderas med JS.

Gjorde en liten snabbkoll, och min JSON ligger runt 20kB och motsvarande html/xml-kod runt 240kB, och i min json har jag dessutom mycket överflödig info som inte används i xml.

En löst hängande dom-nod: är det t.ex. att jag skapar en nod utan att lägga dokumentet som förälder?
Ex.

var table = new Element('table');

och efter rendering kör

table.inject(document.getElementById('table_position'));

eller skall jag använda något annat för att skapa "löst hängande".

Annan fråga: just nu ligger följande kod där tabellen skall vara:

<div id="table_position"></div><script type="text/javascript> cal.render('table_position'); </script>

vilket innebär att renderingen av tabellen sker mitt i renderingen av sidan.
Skall jag kanske placera koden i onLoad eller onDomReady så att tabellen renderas när sidan är färdig?

[martine]

Ursprungligen postat av qson

createDocumentFragment verkar inte finnas i explorer...

Jovisst fungerar createDocumentFragment i Explorer, det ska inte vara något problem med det. Se http://reference.sitepoint.com/javascript/...ocumentFragment för information och ett exempel.

Originally posted by -qson@Apr 17 2009, 13:29
En löst hängande dom-nod: är det t.ex. att jag skapar en nod utan att lägga dokumentet som förälder?
Ex.

var table = new Element('table');

och efter rendering kör

table.inject(document.getElementById('table_position'));

eller skall jag använda något annat för att skapa "löst hängande".

Ja, eller använd createDocumentFragment. Det viktiga är att du bygger ett träd som inte sätts in innan det är färdigbyggt eftersom sidan då måste renderas om hela tiden, vilket tar tid. Varför använder du förresten inte de vanliga appendChild eller insertBefore utan inject?

Ursprungligen postat av qson

Annan fråga: just nu ligger följande kod där tabellen skall vara:

<div id="table_position"></div><script type="text/javascript> cal.render('table_position'); </script>

vilket innebär att renderingen av tabellen sker mitt i renderingen av sidan.
Skall jag kanske placera koden i onLoad eller onDomReady så att tabellen renderas när sidan är färdig?

Jag skulle definitivt använda onload istället för små snuttar av js insprängda här och där. In med alltihop i en extern fil.

[dAEk]

Hur gick det?

[qson]

Jo, liten statusrapport. Problemet var inte renderingen, utan mootools Garbage Collection. När jag använde funktionen new Element(); så skapas ett element med alla mootools-funktioner vilket senare måste trashas när man lämnar sidan. Detta tog ca. 90% av laddningstiden (läs 5-6 sek i FF). Testade även en större tabell (ca 20.000 celler), och då var unload ca 10 sek.
Har nu skrivit om min rendering till att skapa en html-sträng och sedan sätta div.innerHTML till denna sträng. Renderar något snabbare än mootools, och ingen garbage att samla in. Sidan kan lämnas direkt.

Vet inte hur det prestandamässigt är att skapa en html-sträng med 20000+ celler (50-100 celler per rad) och sedan skicka den till DOM med innerHTML jämfört mot t.ex. document.createElement. Har bara konstaterat att mootools (v1.11) inte skall av´nvändas till stora dynamiska tabeller.

[dAEk]

Ok, trevligt med lite information och slutsatser. Det kommer säkert hjälpa nån annan framöver.

[qson]

Hej igen! Tar nu upp en gammal tråd igen för jag har stött på problem...

Skriptet hänger sig eller tar upp ca 300 MB minne så måste göra något åt detta.
(Lite beroende på vilken dator osv...)

Har f.n. ungefär 120 rader med 30-40 celler per rad ( = ~5000 celler ) och attribut och innehåll i de flesta.

Nu renderas innehållet som rå html och läggs in i div med innerHTML.
Kanske det funkar bättre att rendera med document.createElement ?