Nagy táblázat gyors megjelenítése
Sziasztok!
Egy nagy, körülbelül 1000 soros, 15 oszlopos táblázatot szeretnék megjeleníteni, úgy 3-5 mp alatt.
Ez úgy elsőre kicsit mission impossibble-nek tűnik számomra :-(
Alternatívaként felmerült, hogy az oldal betöltésekor mondjuk csak az első 100 sor jönne le, a többi a háttérben AJAX-szal töltődne.
Nem ismertek erre valami más/jobb/egyszerűbb megoldást?
(persze azon kívül, hogy használjak lapozót, illetve ne így csináljam :-) )
Köszi!
■ Egy nagy, körülbelül 1000 soros, 15 oszlopos táblázatot szeretnék megjeleníteni, úgy 3-5 mp alatt.
Ez úgy elsőre kicsit mission impossibble-nek tűnik számomra :-(
Alternatívaként felmerült, hogy az oldal betöltésekor mondjuk csak az első 100 sor jönne le, a többi a háttérben AJAX-szal töltődne.
Nem ismertek erre valami más/jobb/egyszerűbb megoldást?
(persze azon kívül, hogy használjak lapozót, illetve ne így csináljam :-) )
Köszi!
Lapozás...
Az ügyfél kérése az 1000 sor,
Olyasmi jutott még eszembe, hogy mondjuk egy cella a táblázatban áll körülbelül 19 karakterből(ebből 4 a nyitó tag, 10 az adat, 5 a záró). Esetleg nem html-be kellene rögtön kinyomni, hanem amint betölt az oldal, AJAX-szal lekérni tartalmat, ami mondjuk egy csv (esetleg JSON?) fájl, ami tipikusan a 9 formázásért felelős karakter helyettesíti 1-gyel, majd ezt javascript-tel feldolgozni (esetleg valami grid implementációval?)
Elemezd a problémát és az elvárásokat
1. Mennyi idő alatt jutsz hozzá az adatokhoz a szerveren (adatbázis lekérdezés)
2. Mennyi idő alatt készít php belőle strukturált adatot
3. Mennyi idő alatt jut le kliensre
4. A kliens mennyi idő alatt jeleníti meg
Egy biztos, vannak esetek mikor tényleg szükség van az 1000 sorra, bár ezek a helyzetek inkább a szerver-kliens modell létjogosultságát vitatják, adott helyzetben, mint annak korlátait.
Én egy kis optimalizálás után eljutottam odáig, hogy az előző verziómhoz képest, ami akár 80-120KB adat volt (az egy oldal), most 30-40Kb a plafon, bár nekem csak 5-6 oszlop játszik 1000 sorban, viszont kell 2-5 másodperc, hogy használatra kész legyen.
Az 1000 soros táblázat klasszikusan olyankor igény, mikor több olyan körülmény áll össze, ami nem teszi lehetővé a kívánt rekordok adott időn belül történő elérését. Például lassú, vagy megbízhatatlan internet, fejlesztői tapasztalatlanság (ezt magamra is értem), valós ügyfél igény.
Nézd! Számold ki, hogy optimális körülményekkel mi a racionális betöltődési idő.
1. Mérj és átlagolj adatlekérdezési időt (nekem javasoltak itt a laboron gyorsító tárazást mysql-hez, még nem foglalkoztam vele...)
2. Php mennyi idő alatt készíti el a strukturált adatot (ami jelen esetben mindegy milyen, esetleg internet sebesség szempontjából lehet fontos)
3. Mennyi idő alatt ér le kliensre
4. Kliens mennyi idő alatt csinál belőle táblázatot.
Amikor én ezeket méregettem, arra a megállapításra jutottam, hogy nem tudok számottevő időt megspórolni azzal, ha JSON-t csinálok az adatból szerveren és egy js template készít belőle táblát kliensen. Az egy előnye az volt, hogy tájékoztatni tudtam usert, hogy az adatok feldolgozása folyamatban van. Azonban ez is kikerülhető, mert betöltöd az oldalt táblázat adat nélkül, kidobsz egy töltök feliratot majd AJAX-szal lekérdezed az adtokat.
Szóval nem lehet a végtelenségig fokozni ezt a kérdést, és a kliens gép képességeiről még nem is esett szó.
Sok-sok éjszakát töltöttem gondolkozással, hogyan is lehetne ezt a legjobban megoldani, és arra a megállapításra jutottam, hogy az ilyen esetek 99% olyan kifogásokból áll, amikről az ügyfél sem tudja valójában, hogy kell-e neki, vagy sem.
google reader
+1
(bár fizetős a cucc, nálunk nagyon bevált a DHTMLX. ezt is tudja:
http://www.dhtmlx.com/docs/products/dhtmlxGrid/samples/loading_big_datasets/50000.html)
+1
http://developer.yahoo.com/performance/rules.html
Valószínűleg ezzel is rendesen le lehetne csökkenteni a táblázat méretét.
Köszönöm a segítséget!
Ha nem kell maradnod a
En anno pont egy ilyen dolog miatt kezdtem el vele foglalkozni, es az jott ki, hogy egy 10.000 adatbol allo xml-t az ext.js tablazata kb 25-30mp alatt dologoz fel, mikozben csontra fagy minden bongeszo erre az idore
Mig a flex-es advanceddatagrid 2-3mp alatt megtudta mindezt csinalni es tudta ugyanazokat a featurekat (oszlopok mozgatasa, sorbarendezese, stb)
Ez a flex datagrid-dolog jól
Egy-két infót tudnál róla mondani?
- Amennyire látom (sajnos, nem értek a flash-hez :-( ) ez egy flash komponens, tehát mindenképpen szükség van hozzá valamilyen (?) flash-es fejlesztői környezethez, ugye?
- Nekem konkrétan olyan gridre lenne szükségem, amiben lehet szűrni (legördülő listából, és szabadszavas kereséssel), rendezni, illetve szerkeszteni is a megjelenő adatokat (Oracle/Zend FW alatt). Ezeket tudja?
Köszi!
"adobe flex builder"-kell
nem konkretan flash, csak a vegeredmeny az :) inkabb hasonlit sw fejlesztesre mint flash fejlesztesre.
ha otthon vagy html/js/css komboban, akkor cirka 2-3 nap alatt megtanulhato annyira, hogy egy ilyen szurheto, sorbarendezheto datadridet osszedobj :) (legalabbis nekem ennyi volt)
Félek, hogy nem lesz rá három
off: külön témában viszont talán érdemes feldobni a html-js szűrhet/rendezhető grid-et, ez is érdekes kérdésnek ígérkezik! :-)
gyakorlatilag minden js
iframe
Végül a kezdeti specifikáció némileg módosult, 500 sort kell megjeleníteni, 52 oszloppal.
Elég sok idő alatt két fontos tapasztalatot szereztem, hátha jól jön valakinek:
- a táblázat (<table>) renderelése nagyon lassú! helyett sokkal érdemesebb span, illetve div tagekkel imitálni a táblázatot
- érdemes iframe-be rakni a táblázatot, mivel az iframe tartalma teljesen különálló módon renderelődik a bögészőkben az oldal többi részétől, így sokkal gyorsabb tud lenni.
A fenti két ötletből igazából csak a másodikra jutott időm, de egy 2,4Ghz-es Celeronon, 768 Mb memóriával kb. 5-6 másodperc alatt töltött be az oldal.
Próbálkoztam az infinite scroll-hoz hasonló, háttérben történő AJAX-os frissítéssel, ám 100-200 sornál már nagyon lassú volt 50-60 további sor beszúrása.
Köszönök szépen mindent ötletet!
dhtmlxGrid
http://www.dhtmlx.com/docs/products/dhtmlxGrid/
Az 500 sor is kezelhetetlen emberileg. Az sem jó az ügyfélnek, hogy alapértelmezésben 25-50 sor látszik, és a felhasználó módosíthatja ezt (pl. 50-100-500)?
Vagy valami ilyen:
http://www.asp.net/AJAX/AjaxControlToolkit/Samples/PagingBulletedList/PagingBulletedList.aspx
extjs 3.0 buffer grid
dhtmlxgrid: tényleg nem tűnik rossznak! sőt, az 50.000 sort megjelenítő példa egészen meggyőző:
http://www.dhtmlx.com/docs/products/dhtmlxGrid/samples/loading_big_datasets/50000.html
Sajnos eddig bármilyen (javascriptes) grid-et próbáltam ki, mindegyik lassú volt a rengeteg cella (20.000) renderelése miatt :-(
Viszont most láttam, hogy kijött az extjs 3.0-s változata, és ebben van egy olyan, hogy buffer grid:
http://ext.theba.hu/3.0-rc1/examples/grid/buffer.html
Ez valami zseniális :-)
Nem táblázatban jeleníti meg a sorokat, hanem egy sor egy div; azonban ez még mindig nagyon lassú lenne 500 sornál.
A trükk az, hogy azokat a div-eket "kiüríti", amik éppen nem látszanak a képernyőn, így egyszerre legfeljebb 20-30 sor van renderelve, a többi valahogy másként (js objektum?) tárolódik, így nem lassítja az oldalt.
Ha 2 héttel előbb jön ki, tuti ezt használtam volna.
Na, mind1, majd legközelebb! :-)