JS Grid - velika tabela [performanse]

[dee]

Probao sam i innerHTML, nije pokazalo nikakve bitne razlike na 6000 cellova (1000 redova sa 6 kolona).

Ovo sto kazes sa vise tablica bi moglo upalit iako bi za to morao zagrebat dobro po kodu. Doduse, pomoglo bi samo za IE koji ceka </table> ending tag pa bi u ovom slucaju pokazivao tabelu po tabelu. Ajde, to bi malo popravilo dojam, ali opet, procesiranje bi bilo jednako dugo (ili cak i duze).

Probao sam i ovo sa inicijalnim istresanjem grida sa servera ali ni to nije nesto previse pomoglo. Zadnje sto sam sad radio je da nemam nikakve iteracije po tabeli vec da sa servera istresem cellove sa x,y IDovima (cell_rowNo_colNo) medjutim ni tu nista. Je to sve skupa nesto brze, ali ni priblizno kako bi moralo radit u ajax aplikaciji. Jer, ako je svrha ajax aplikacije da je brza i responsive, onda ovo nije to onda je server side grid bolji.

Jedino sto se sad mislim je da sklepam grid layout od ULova, ne znam bil to sta ubrzalo stvar...ali vec u startu mi je ruzna ideja jer nesto sto je namijenjeno tablicnom prikazu forsiram u nesto drugo.

Cini se da je zadnja istina: 6 hiljada elemenata je 6 hiljada elemenata...

[dee]

Dakle, kratki rezime ako ce nekad nekome trebat...

Sto se tice renderiranja velikih tabela...

Ima ona prica o tome da IE ceka table ending tag, ali ima jos nesto sto nisam znao a danas naucih. Browser rendering engine i javascript su u istom threadu! Meni je to bilo zestoko otkrice. I zato browser ne moze renderirat sadrzaj dok se izvrsava neki javascript. Tu na scenu stupa setTimeout koji osigurava mrvu pauze da render engine preuzme rijec.


Ono sto sam napravio...

Prekodirao sam svoju grid kontrolu tako da sad osim grid.bind metode ima i grid.multipleBind. Razlika je u tome sto grid.Bind pocisti kontejner grid kontrole (dakle tablicu) prije rendanja, a grid.multipleBind ne cisti nego kreira novu. Obje metode, naravno, na svom kraju rade gridcontainer.appendChild(tabla).

Na mjestu gdje se poziva grid.bind (ili multipleBind) korisnik odlucuje sto mu treba i to na osnovi velicine JSON kolekcije koju dobiva kao ajax response. Tu ide neka chunkSize velicina (koja se moze izvuc u config file) i tad je slucaj:

a) collection.length < chunkSize => grid.bind(collection)

b) colelction.length > chunkSize =>

Ovdje imamo malo peripetija.
Napravio sam kratku rutinu koja podijeli kolekciju na x odsjecaka (kao pagination) i ide poziv na grid.multipleBind(chunk), ali ima jedna fora. Izmedju poziva mora ici:

setTimeout(closurePoziva)

Naime, iako imamo onoliko tabela koliko chunkova, svejedno browser ceka neki mali dio vremena da se sve izracuna pa tek onda da prikaze. Kako bi se napravio force DOM update, setTimeout sa par desetaka milisekundi rijesava stvar.


Nakon cijelo dana peripetija i zajebancije, moram priznat, hiljadu rekorda istrese na klijenta ko od sale. Radi fakat lijepo.

Eto, ako ce kome bit korisno, nek stoji.

Hvala svima jos jednom na komentarima.

[DejanVesic]

Vrlo lepo :-)