Lista készítése adatbázisból AJAX-al, dinamikus táblába.
Sziasztok!
Ahogy azt a hozzászólás témájából láthatjátok, kemény fába vágtam a fejszémet. Nincs is igazán különösebb probléma az eljárással, hiszen elkészült és működik, de nagyon lassú. És nem az AJAX-olással van a probléma, hanem a DOM táblázat létrehozásával. Ha pl.: 200 sort fűzök hozzá a táblához, az akár 5-10 másodpercig is eltarthat, és akkor még nem is beszélünk mennyiségről. insertRow, insertCell utasításokat használtam, a sorok és cellák hozzáadásához, továbbá createTextNode és appendChild-el adom a cellákba a tartalmat. A sorokhoz id-t rendelek hozzá, továbbá a sorok onmouseover és onmouseout eseményeit definiálom.
Hogyan lehet, kell felkészülni egy ilyen típusú alkalmazás optimalizálására? Vagy a kliens oldali js + DOM sebessége emberi léptékekben is véges?
Örömmel fogadok minden hozzászólást és kritikát, üdv:
s_volenszki
■ Ahogy azt a hozzászólás témájából láthatjátok, kemény fába vágtam a fejszémet. Nincs is igazán különösebb probléma az eljárással, hiszen elkészült és működik, de nagyon lassú. És nem az AJAX-olással van a probléma, hanem a DOM táblázat létrehozásával. Ha pl.: 200 sort fűzök hozzá a táblához, az akár 5-10 másodpercig is eltarthat, és akkor még nem is beszélünk mennyiségről. insertRow, insertCell utasításokat használtam, a sorok és cellák hozzáadásához, továbbá createTextNode és appendChild-el adom a cellákba a tartalmat. A sorokhoz id-t rendelek hozzá, továbbá a sorok onmouseover és onmouseout eseményeit definiálom.
Hogyan lehet, kell felkészülni egy ilyen típusú alkalmazás optimalizálására? Vagy a kliens oldali js + DOM sebessége emberi léptékekben is véges?
Örömmel fogadok minden hozzászólást és kritikát, üdv:
s_volenszki
js template
szerk: ha nem akarsz sokat változtatni, első körben a cloneNode-ot is kipróbálhatod, valamennyit biztos gyorsít, kérdés hogy mennyit.
js template
Köszi: s_volenszki
Eredményes délután volt!
Örök hálám! Kicsit átkellett alakítanom az AJAX-os adatbázis olvasó rutinom kimeneti struktúráját, de teljesen baró!
Köszike!
s_volenszki
kliens oldali sablonrendszerek összehasonlítása ...
DomHelper vs. Scriptaculous Builder vs. MochiKit vs Trimpath vs Trimpath-R vs SXOOP vs prototype Template
eredeti blog bejegyzést érdemes megnézni hozzá, http://weblabor.hu/blog/20061119/kliensoldalisablon , ill. az én hozzászólásomat http://weblabor.hu/blog/20061119/kliensoldalisablon#comment-36747
kicsit kibővítettem a listát, próbáltam összevadászni az aktuálisan elérhető utolsó verziókat. Ezen teszt, csak a sebességeket veti össze, a sablonkezelő rendszereknek számos más előnyük is van a sima DOM építő függvényekhez képest ( pl. ha a js-t nem annyira ismerő dizájner kollégával kell együtt dolgozni , + beépített módosítók stb. stb. lásd Smarty szerver oldalon = Trimpath kliens oldalon :) )
tesztben szereplő rendszerek elérhetőek
DomHelper
http://www.jackslocum.com/blog/
Scriptaculous Builder
http://mir.aculo.us/2007/3/12/script-aculo-us-1-7-1-beta
MochiKit
http://www.mochikit.com/download.html
Trimpath / Trimpath-R
http://trimpath.com/project/wiki/JavaScriptTemplates
http://www50.brinkster.com/zlib13/trimpath/demo/compare-template-engines.htm
SXOOP
http://sxoop.wordpress.com/2006/08/30/javascript-templating-with-sxooptemplate/
prototype Template
http://prototypejs.org/download
http://prototypejs.org/api/template
teszt : http://toxin.hu/yui/bench.html
letöltés : http://toxin.hu/yui/js_templates.zip
ha esetleg vmi kimaradt volna, jelezzétek és beépítem :) , konklúziókat mindenki saját követelményrendszere felállítása után vonja le maga , ill. vasárnap js sablonkból nekem most ennyi elég volt :)
üdv t
ui : egy kis méricske / konklúzióféle : fx + ie6 esetén továbbra is a kompilált DomHelper a legfürgébb 0.6s körül mind fx mind ie6 alatt, fx alatt Trimpath és proto 0.2 s de ie6 alatt már 2s+ , a nem innerHTML töltésen alapuló rendszerek pedig felejtősek ha a sebesség számít
Húúú
s_volenszki
ps.: Az 500 sor/másodpercben benne van az AJAX kommunikáció is!
Template az Ext.js coreban
Együtt tud működni a következőkkel: Jquery, Prototype, Yahoo UI