ugrás a tartalomhoz

dom ready gyorsítása

Tanul0 · 2013. Szep. 25. (Sze), 08.26
Sziasztok!

Egy online ügyviteli rendszert fejlesztek. A problémám az, hogy a dom ready nagyon lassú, pláne egy régebbi gépen. A html mérete elég nagy mivel akár 2 évnyi bejegyzés megjelenhet ahol minden napra lehet több bejegyzés is. A html mérete gzip-elve 70-80kb, firefox net panelje szerint ezt 700ms alatt betölti, de a dom az én gépemen 3 egy régebbi gépen pedig 10mp alatt tölt be. http://kepfeltoltes.hu/view/130925/kep_www.kepfeltoltes.hu_.png itt egy kép a netpanelről. Javascript, CSS és a képek mind cachelve vannak. Mivel van olyan javascript kód aminek maximum 1-2 mp alatt le kéne futnia (pl. horgonyhoz ugrás jquery scrolltop-al), így nem tudom, hogyan tudnék javítani még a kódon, vagy mit csináljak másképp. Lazy load és lapozás nem jöhet szóba. Várom az ötleteket és tippeket.

Üdv,
Gábor
‹ Email spambot üzenőfal ›
 ■
1

Kód(részlet) hiányában nehéz

Hidvégi Gábor · 2013. Szep. 25. (Sze), 08.43
Kód(részlet) hiányában nehéz ötletet adni; én soha nem használtam a domready-t és társait, egyszerűen a kódba a megfelelő helyre (például a </body> elé) teszek egy <script>-et, amiben az adott blokk vagy teljes kód inicializációját végzem.
2

adatok javascriptben?

szabo.b.gabor · 2013. Szep. 25. (Sze), 09.27
nem tudom de mi lenne ha, a szerver oldalon ebből a sok adatból nem generálnál html-t, hanem json_encode-dal beleraknád egy javascript változóba.

<script type="text/javascript">
var adatok = <?php echo json_encode($adatok); ?>;
</script>
így a feldolgozandó html jóval kisebb lesz, majd js-ből legenerálod az adott html részeket, ha kell..

aztán, hogy szummában gyorsabb lesz-e, az már más kérdés
3

Nem hiszem, hogy a kód sokkal

Hidvégi Gábor · 2013. Szep. 25. (Sze), 10.17
Nem hiszem, hogy a kód sokkal kisebb lesz, főleg, ha tömöríti, akkor minimális a különbség a html és a json között. A renderelés biztos lassabb lesz, mert a natív feldolgozásnál nincs gyorsabb.
4

(pl. horgonyhoz ugrás jquery

Hidvégi Gábor · 2013. Szep. 25. (Sze), 10.18
(pl. horgonyhoz ugrás jquery scrolltop-al)
Miért nem használod a böngésző beépített horgonykezelését? Az már betöltés közben is működik.
6

text/template

complex857 · 2013. Szep. 25. (Sze), 10.27
Ha nem kell / akarsz mindent a képernyőre rakni, de nem akarod a teljes renderelést se áttenni azonnal kliens oldalra feldarabolhatod a szerver oldalon generált html -t valamilyen logika mentén külön darabokra, mindegyiket berakva egy
<script id="chunk42" type="text/template"></script>
tagbe. Ezeket később id / class mentén elő tudod keresni javascriptből, a belsejében lévő stringet a szokásos document.getElementById("chunk42").innerHTML -el amit utána beszúrhatsz a megfelelő helyre.

A módszer lényege, hogyha olyan type -ot adsz meg a <script> tagnek amit a böngésző nem ismer (a text/template egy népszerű érték erre) akkor a tartalmát nem fogja parsolni és nem épít belőle DOM -ot, cserébe a szöveg könnyen elérhető marad js oldalról és lehet kevesebb meló mint teljesen átültetni a html generálást js oldalra (ezt innen nehéz megmondani).

Nyilván ha már most 10mp parsolni az kész html -t, ugyanazon a gépen először előállítani js-el és utána parsolni se lesz gyorsabb, mindenképp csökkenteni kéne az elvégzett munka mennyiségét és csak azt "htmlesíteni" amit épp meg kell mutatni. Gyaníthatóan a felhasználók monitorjára se fér ki minden ami két év alatt történt.
5

Ha tudnál csinálni belőle egy

bamegakapa · 2013. Szep. 25. (Sze), 10.27
Ha tudnál csinálni belőle egy publikus változatot obfuszkált adatokkal és megosztanád velünk, biztos tudnánk tanácsokat adni.
7

Tedd lapozhatóvá, akár

inf · 2013. Szep. 25. (Sze), 15.40
Tedd lapozhatóvá, akár scrollra történő automatikus betöltéssel. A másik lehetőség, hogy magát a listát eleve ajax-al rántod le.
8

Fix méretek

Hidvégi Gábor · 2013. Szep. 25. (Sze), 15.55
Meggyorsítja a rendelést, ha a böngésző előre tudja az elemek méreteit, például a kis ikonokét. Ezek az ikonok ugye nem képek, hanem szimpla linkek, amelyeknek van háttérképe?

Ha tudod, hogy egy sor legfeljebb mondjuk 20 pixel magas, akkor írd be neki ezt stílusba.

Ugye a táblázaton belül nem használsz sehol különálló JS eseményt (pl. ikonokon onclick)?
9

Plusz ha sok kis kép van az

inf · 2013. Szep. 25. (Sze), 16.06
Plusz ha sok kis kép van az oldalon, akkor érdemes sprite-ba tenni őket, azzal akár másodperceket is lehet hozni betöltési időben... Gondolom ez a része domready után rakódik csak rá.
12

Meg fogom csinálni.

Tanul0 · 2013. Szep. 26. (Cs), 17.05
Meg fogom csinálni.
19

Na akkor adok hozzáférést:

Tanul0 · 2013. Szep. 30. (H), 13.11
Na akkor adok hozzáférést:

/*Hozzáférést privátban lehet kérni.*/

Most annyit csinátlam, hogy kipróbáltam azt, hogy simán a böngésző anchorját használom, így csak az a baj, hogy a top-tól 21 pixellel lejjebb kellene pakolnom.

A tesztrendszerben kb. fele annyi adat van mint az éles rendszeren.
10

flame gyanús..

szabo.b.gabor · 2013. Szep. 25. (Sze), 21.42
Ebből hatalmas flame lesz..

-ki az az ember aki ennyi adatot használni tud bármire is
-tedd be javascriptbe az adatokat, kérd le őket szerverről ajax-szal
-nyomj rá valami jqueryui autocomplete szerű szűrést, vagy mittudomén
-használj css sprite-ot, vagy ha még tutibbat akarsz, akkor font iconokat
-próbálj egyszerűsíteni a markupon (tényleg kell table, tbody, tr, th?)
-ne rakj a html-be javascript-et láttam onclick-eket.. használj jquery.on()-t vagy annak megfelelő dolgot, és csak egyszer hozd létre az eseményfigyelőt a szülő elemen
-nézd meg chrome-ban a fejlesztői eszközökkel timeline, profiles, network, stb oldalkat (vagy firebugban)
-de legelőbb gondold át a koncepciót, vagy legalább üljetek le a rendszer leendő használóival és találjátok ki hogy hogy lenne jó nekik
11

"-ki az az ember aki ennyi

Tanul0 · 2013. Szep. 26. (Cs), 17.04
"-ki az az ember aki ennyi adatot használni tud bármire is"

Eredetileg csak havi nézet lett volna, utólag találták ki, ezek elmebetegek, hidd el telefonálás közben le-fel scrolloznak, láttam őket munka közben.

"-próbálj egyszerűsíteni a markupon (tényleg kell table, tbody, tr, th?)"
Meglesz.

"-ne rakj a html-be javascript-et láttam onclick-eket.. használj jquery.on()-t vagy annak megfelelő dolgot, és csak "
Lehet benne maradt, nem szándékos, ránézek majd.

"-de legelőbb gondold át a koncepciót, vagy legalább üljetek le a rendszer leendő használóival és találjátok ki hogy hogy lenne jó nekik"
Hát ez megtörtént, kb már át lett írva az egész menetközben mikor elkezdték használni.
13

Ingyenes?

Pepita · 2013. Szep. 28. (Szo), 21.36
utólag találták ki, ezek elmebetegek, hidd el telefonálás közben le-fel scrolloznak
Ugye legalább ingyen vállaltad? Tudniillik - szerintem - megrendelőre ilyet még akkor sem mondunk, pláne nem ekkora nyilvánosság előtt, ha netán igaz lenne... :)
De legtöbbször inkább arról van szó, hogy nem értitek meg egymást.

Szerk.: Számomra nem derült ki, hogy mi is a honlap célja... Biztosan ez az, amit kértek?!
18

Igen, ez mert már használják

Tanul0 · 2013. Szep. 30. (H), 13.10
Igen, ez mert már használják egy hónapja (vagy több). Nem rég kérték bele az évi nézetet "sürgősen" én mondtam nekik, hogy lehet, de lassú lesz. Most pedig azon dolgozom hogy ne legyen lassú.

" ezek elmebetegek, hidd el telefonálás közben le-fel scrolloznak" ezt nem rossz értelemben írtam, és csak az ő szavaikat használtam, hiszen saját elmondásuk szerint is azok, legalábbis a munkamoráljuk elmebeted módon megy, mert pörgés van :D
21

Részben rendben

Pepita · 2013. Szep. 30. (H), 22.32
és csak az ő szavaikat használtam
Ez a rész letudva, bár én akkor sem ismételném itt vissza - de ez én vagyok. Régen rossz, mikor ilyenért kell magyarázkodni. (Azt viszont távolról sem állítom, hogy én sosem hibázom!) (És légyszi használd az idézetet, formázást, olvashatóbb úgy.)
kérték bele az évi nézetet "sürgősen" én mondtam nekik, hogy lehet, de lassú lesz.
Ez ugye tesztoldal volt, amit láttam? (Asszem.)
Olyat sose csinálj (adj ki a kezedből), ami lassú, mert lehet, hogy most tudod, milyen gépeken használják, de jövő héten beállíthatnak egy új munkaerőt egy hamar a sufniból előkotort P III-al, az meg le fog fagyni... Remélem tesztben csinálod, míg jó nem lesz. A lapozást én is jó megoldásnak tartom, de én lehet, hogy szerveroldalon oldanám meg. Ha jól emlékszem (amíg kint volt a hozzáférés :), addig néztem) itt nem sok egyéb tartalom van ezen kívül, úgyhogy nem kell js-függés, ha backendből lapozol.
14

Ritka, de megint egyetértek

H.Z. · 2013. Szep. 28. (Szo), 21.38
Ritka, de megint egyetértek Pepitával... Hogy nem érted őket, attól még lehet jogos az igényük, hogy ne csak havi nézetet lássanak.
És hát igen... Képzeld, mi lenne ha véletlenül tudom, ki vagy és én is az érintett helyen dolgozom! ;)
15

OFF

Pepita · 2013. Szep. 29. (V), 00.05
Kéne már egy statisztika a "ritkaságról". :)
Szerintem emelkedő tendenciát mutat, miért hangsúlyozod, hogy ritka?
Nem zavar, sőt, tetszik. :)
16

Igyekszem ezt a fórumot flame

H.Z. · 2013. Szep. 29. (V), 09.18
Igyekszem ezt a fórumot flame mentes övezetként kezelni, ezért a legtöbb esetben hallgatok, ha valami olyat írsz... ;)
17

:)

Pepita · 2013. Szep. 30. (H), 03.02
Milyet? :)
Szerk.: nehogy tapétát szaggass, csak aludni nem tudok!
20

Szerintem felesleges bármit

inf · 2013. Szep. 30. (H), 17.44
Szerintem felesleges bármit átírnod. Az éves nézetnél tegyél bele egy ilyet: http://andersonferminiano.com/jqueryscrollpagination/ és mondd azt, hogy csak javascripttel működik... Ha ez nem elfogadható, akkor meg lassú és pont. A kép betöltéseken lehet még sokat hozni, ha sprite-ba teszed őket. (Nem néztem meg a listádat.)
22

Megcsináltam, hogy css

Tanul0 · 2013. Okt. 1. (K), 14.38
Megcsináltam, hogy css sprite-ok legyenek az ikonok, illetve most már csak 1,5 havit töltök be elsőra, majd ha ready van akkor betöltöm a teljes tartalmat. Így most egész jónak tünik, de még majd azért dolgozni fogok rajta. Az ajaxos scrollra való betöltést azért nem használtam, mert egyelőre nem tudtam megírni értelmesen azt, hogy ha felfelé van scroll akkor töltse be visszamenőlegesen is (egyelőre "végtelenbe tölt").
23

Nem kell

Hidvégi Gábor · 2013. Okt. 1. (K), 15.02
Ha jól megírod a HTML-t és a CSS-t, akkor nem kell javascripttel bajlódnod, sem betöltögetéssel, sem pedig a görgetéssel. Kipróbáltam az eredeti, 1,3 megabájtos kódod kikapcsolt JS mellett, és egy szemvillanás alatt bejön még IE7-en is egy Atomos PC-n.
24

Átírtam div-ekre az egészet,

Tanul0 · 2013. Okt. 1. (K), 21.26
Átírtam div-ekre az egészet, 2-300ms-t így is csökkent