ugrás a tartalomhoz

Nagy táblázat gyors megjelenítése

krisy · 2009. Feb. 10. (K), 22.02
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!
 
1

Lapozás...

fchris82 · 2009. Feb. 10. (K), 23.05
Sok adatnál ezt úgy szokták, hogy van "lapozás", meg szűrési lehetőség. Így egyszerre mindig csak 50 adatot tölt be mondjuk. Minek 1000 sor egybe? Erőforrás felhasználás tekintetében is teljesen felesleges a művelet, mert nem hiszem el, hogy mind az 1000 sorra egyszerre szükség van.
2

Az ügyfél kérése az 1000 sor,

krisy · 2009. Feb. 11. (Sze), 10.02
Az ügyfél kérése az 1000 sor, ezzel a részével semmit nem tudok csinálni sajnos :-(
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?)
3

Elemezd a problémát és az elvárásokat

s_volenszki · 2009. Feb. 11. (Sze), 10.58
Ebben az esetben mit is kell figyelembe venned:

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.
4

google reader

gex · 2009. Feb. 11. (Sze), 11.24
csináld meg a google reader-ben (is) lévő görgetést. Bártházi András írt róla.
5

+1

harse · 2009. Feb. 11. (Sze), 16.45
szerintem is ez a legjobb megoldás.

(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)
6

+1

krisy · 2009. Feb. 15. (V), 11.44
Még egy ötlet jutott eszembe közben:
http://developer.yahoo.com/performance/rules.html

Starting with HTTP/1.1, web clients indicate support for compression with the Accept-Encoding header in the HTTP request.


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!
7

Ha nem kell maradnod a

ksgy · 2009. Feb. 15. (V), 16.32
Ha nem kell maradnod a html-nel mindenkepp, szerintem erdemes lenne flex-et megnezned.
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)
8

Ez a flex datagrid-dolog jól

krisy · 2009. Feb. 16. (H), 20.54
Ez a flex datagrid-dolog jól hangzik! :-)

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!
9

"adobe flex builder"-kell

ksgy · 2009. Feb. 18. (Sze), 11.27
"adobe flex builder"-kell neked :)
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)
10

Félek, hogy nem lesz rá három

krisy · 2009. Feb. 18. (Sze), 21.44
Félek, hogy nem lesz rá három napom, de azért mindenképpen belenézek, köszönöm az ötletet!

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! :-)
11

gyakorlatilag minden js

ksgy · 2009. Feb. 19. (Cs), 13.03
gyakorlatilag minden js keretrendszernek van sajat datagridje, ami mindent tud - csakhat *** lassuak a html/js adottsaga miatt :/
12

iframe

krisy · 2009. Ápr. 16. (Cs), 01.57
Sziasztok!


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!
13

dhtmlxGrid

jbtibor · 2009. Ápr. 16. (Cs), 11.18
A harse által is ajánlott dhtmlxGrid nem vált be?
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
14

extjs 3.0 buffer grid

krisy · 2009. Ápr. 21. (K), 20.50
Sajnos nem tudtam meggyőzni a megrendelőt, hogy 500 sor kezelhetetlen; ezt is 1000 sorról "alkudtuk le".

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! :-)