|
JS Grid - velika tabela [performanse]
Ima li tko kakvu ideju kako poboljsat performanse client side grida u slucaju kad ima cca 1000 redaka?
Covjek nece pagination, nece nista, hoce sve svoje rekorde na ekranu u istom trenu i bok. Naravno, generiranje tolikog broja DOM elemenata js-om je sporo za poludit. Probao sam i direktno document.createElement, i documentFragment i innerHTML, znacajnijih razlika nema. Jedino sto nisam probao jest kreirat tabelu na serveru, poslat je s inicijalnim requestom na client, grid da primi referencu na nju i onda na bindu da samo puni table.rows[x].cells[y]. innerHTML = obj.property... To je jedina ideja koja mi je ostala ne znam bil to sta pomoglo? Ili netko ima jos kakvu ideju? Hitno mi. Hvala unaprijed. Pozdrav |
Ja bih išao još i dalje - kreirao bih _celi_ inicijalni prikaz tabele, sa svim vrednostima, na serveru i to poslao klijentu kao rezultat poziva.
JS bih koristio samo za izmene vrednosti u gridu. |
Na sto mislis sa 'svim vrijednostima'? Mislis tu na stilove ili konkretne podatke?
Jer, podaci ocito ne dolaze u obzir posto ce se oni punit JSONom dobivenim ajax pozivom, ali oni ionako nisu problem. Krenuo sam upravo prekodirat taj dio, istrest cu cijeli prikaz tabele sa servera pa cemo vidjet sta ce ispast i koliko ce poboljsat. PS. Imas li konkretno iskustvo s ovim? Usporedbu performansi? |
U najvećem broju slučajeva, prilikom prikazivanja bilo kog grida, početni uslovi (šta se treba prvo prikazati) su poznati (pa makar bili i oni default) - zato, kreiram celu stranicu na serveru (sa popunjenim podacima) a onda radim sa JSON izmenu.
Možeš i da formiraš celu tabelu (praznu), ali će ti inicijalno punjenje (preko JSON-a) biti solidno sporo - u zavisnosti od browsera, i od organizacije koda (koliko paralelnih JSON-a može da se odradi). Postoji i fora sa vidljivim delom grida, pa samo njega popunjavaš, a ostatak dovlačiš na skroll po gridu - samo je ovo solidno pipavo za izvođenje. |
Citat:
Citat:
Point je, covjek naviko na dekstop aplikaciju u kojoj je imao rijeseno tako da sve vidi odjednom i nemos ga krstit. Javim se svakako kad prepisem kod da vidimo razliku. |
a da napravis nesto kao ono sto se koristi za strane sa puno slika, da kako skrolujes na dole ajax u pozadini ucitava nove redove?
|
Citat:
Citat:
Oce sve. |
Baš se ovih sekundi mučim sa sličnim problemom... Izabrao sam Datatables - http://www.datatables.net/examples/ - kao grid... Što se performansi na 1000 zapisa tiče, na Firefox-u radi solidno dobro, na Chrome extra brzo dok mi je IE zakucao na par sekundi. Pa sad ... vidi da nađeš neko optimalno rešenje ili da ubediš klijenta da proba neki drugi browser. :p
|
Citat:
Inace, imam svoju grid kontrolu koja mi vozi x projekata i radi ko urica...al jbg, svugdje ima nekakav filter ili pagination koji stvari drzi u granicama normalnog (up to 100) i tu radi samo tako. Znas li kako taj grid radi render tabele? Kojom metodom? Jesi gledo ispod haube? |
Citat:
Takodje probaj da dodajes samo tr preko DOM-a, a da onda upisujes innerHTML, kroz maglu se secam da sam tako nesto nekad procitao... I jos jedna ideja, podeli tabele na vise manjih tabela (tipa 200 redova svaka).. to ti malo komplikuje logiku, ali trebalo bi da upali... |
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... |
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. |
Vrlo lepo :-)
|
| Vreme je GMT +2. Trenutno vreme je 15:54. |
Powered by vBulletin® Verzija 3.6.8
Copyright ©2000 - 2024, Jelsoft Enterprises Ltd.
Copyright © DevProTalk. All Rights Reserved.