ugrás a tartalomhoz

jQuery EasyUI - Lassú oldalbetöltés

szoron · 2016. Aug. 22. (H), 19.24
Sziasztok!

EasyUI segítségével készítettem egy átfogó felületet több feladat megoldására.
A komponensek révén 15-20 oldalon tud a felhasználó 40-50 komponens segítségével feladatokat elvégezni (adminisztrálni folyamatokat)
Egy html (100kb) oldal a komponensekkel és egy js (130kb) a hozzájuk tartozó függvényekkel.
És persze a php-k az adatbázis lekérdezésekkel.

Abban az esetbe, ha számítógépről érjük el az említett html, 5 mp alatt betöltődik.
Viszont az oldalt Android (Firefox) tabletekről kell elérni. Ekkor viszont kár 20-30 mp is lehet az oldal beöltése. Viszont ezek után már gyors minden folyamat, az oldal esetleges újratöltéséig, de ez ha nincs kapcsolati hiba nem szükséges.

A kérdés, hogy a workek-es módszerrel vagyis, hogy pl. login oldalon a háttrében tölti be a további függvényeket a oldal gyorsítható a betöltés vagy van valami más megoldás arra, hogy ne kelljen 20-30 mp-t várni a betöltésre.

A segítségeket előre is köszönöm!
Attila
 
1

Profil

Hidvégi Gábor · 2016. Aug. 22. (H), 19.30
Első körben profilozni kéne, hogy az összes folyamatból mi az, ami lassú, anélkül nem lehet megmondani, hogy hol kell belenyúlni.
2

Chrome-ba csináltam 4

szoron · 2016. Aug. 22. (H), 19.53
Chrome-ba csináltam 4 profilozást
CPU, HEAP, Allocation Timelines, Allocation Profiles
Mit kell keresnem?
Sajnos ebben már ne vagyok otthon! :(
Csatoljak be valamit amiről lehet látni a problémát?

Köszönöm ismételten!
3

Firefoxon

Hidvégi Gábor · 2016. Aug. 22. (H), 20.04
A chrome profilozását nem próbáltam még, a Firebug például kiírja, hogy melyik függvénnyel mennyi időt tölt el a program, azok hányszor futnak le stb.

Nem ártana, ha csatolnál képet a profilozásról, esetleg az űrlapokról, hogy mennyire összetettek.
4

A képet a Képfeltöltés.hu

szoron · 2016. Aug. 22. (H), 20.34

A képet a Képfeltöltés.hu tárolja. http://www.kepfeltoltes.hu


A képet a Képfeltöltés.hu tárolja. http://www.kepfeltoltes.hu


A képet a Képfeltöltés.hu tárolja. http://www.kepfeltoltes.hu


A képet a Képfeltöltés.hu tárolja. http://www.kepfeltoltes.hu

Ebből sajnos nekem nem derül ki hogy mi lehet a baj
5

A képet a Képfeltöltés.hu

szoron · 2016. Aug. 22. (H), 20.36

A képet a Képfeltöltés.hu tárolja.
6

Elemek száma

Hidvégi Gábor · 2016. Aug. 22. (H), 20.47
Nekem ebből az látszik, hogy rengeteg idő megy el a rajzolgatással, azaz biztosan sok elemmel dolgoztok - ugye?
7

Igen. Minden folyamatot

szoron · 2016. Aug. 22. (H), 21.01
Igen. Minden folyamatot lekezel a két fájl. Kevesebből nem lehet megoldani. Ezért gondoltam hogy valahogy szét kellene szedni, hogy csak akkor töltsön be részeket.
8

JS

Hidvégi Gábor · 2016. Aug. 23. (K), 08.02
Nem hiszem, hogy azon múlik, hány részre szeded szét.

Ezerféleképp lehet optimalizálni, a kód ismerete nélkül csak annyit, hogy minél kevesebb javascript, annál gyorsabb lesz. Már sok ilyet csináltam, a végén a teljes rendert le lehet szorítani 20-30 ezredmásodpercre, ebben biztos vagyok.

A rajzolási folyamatokat kéne először átnézni, hogy miért van szükség annyi függvényhívásra, lehet-e csökkenteni. Nagyobb lépés megszabadulni a jQuery-től, és natív függvényeket használni, ezzel sokat lehet spórolni. A leggyorsabb meg valószínűleg akkor lenne, ha szerveroldalon állítanátok össze a kész html-t.
9

Köszönöm a segítséget! Ahogy

szoron · 2016. Aug. 23. (K), 20.25
Köszönöm a segítséget!

Ahogy írtam én a jeasyui rendszert kezdtem el használni.
Mit javasolnál, ha átírnám az egészet miben próbálkozzak?

A lényeg igen egyszerű.
Login oldal, folyamatok kilistázása, azokba szerkesztése. Ezen folyamatokkor adatok tárolása, majd ezek listázása.

Segítségedet ismételten köszönöm!
10

Privát

Hidvégi Gábor · 2016. Aug. 23. (K), 22.16
Ha gondolod, keress meg privátban, úgy tudok legkönnyebben segíteni.
11

valószínűleg amúgy rosszul

szabo.b.gabor · 2016. Aug. 24. (Sze), 07.46
valószínűleg amúgy rosszul inicializálsz dolgokat, sokszor fut le feleslegesen ugyanaz, vagy sok apró részletben hajtod végre, amit egyszerre is lehetne.

lehet, hogy könnyen megugorható a jelenlegi rendszer javítása is, de kód nélkül nem igazán lehet hozzászólni (:
12

+1

bamegakapa · 2016. Aug. 24. (Sze), 12.39
Valóban a profilozás segíthetne a dolgon, illetve a kód átnézetése szakértővel. Az újraírást korainak érzem, attól függ, mennyire rossz a kód. Nem a jQuery-t meg ilyeneket kell kiszedni, ennyire lassú nem attól lesz. A DOM fa felesleges, ismételt toszogatása, rosszul megírt ciklusok, illetve olyan dolgok Javascripttel megoldása, amik nem oda valók - látatlanban ezekre gyanakszom.

Egy pillantást vetve az első képre, gyanúsan sok időt tolt a program bizonyos jQuery metódusoknál, mint pl. a css(). Nem mondom, hogy itt ez történik, de tipikus hiba, hogy Javascriptből állítgat az ember CSS értékeket. Nagyon ritkán indokolt, ha ilyet csinálsz, tudd, miért teszed. addClass(), removeClass(), toggleClass() a barátod.

De még egyszer mondom, a kódba tekintés nélkül lehetetlen bármit mondani. Sokszor elég ránézni, hogy az ember lássa, milyen tipikus hibák kerültek elkövetésre.

Ezt az EasyUI-t nem ismerem, pár perc utánanézés során legfeljebb arról győzött meg, hogy nincs rá szükségem. Ha újraírás lesz, én tuti kidobnám. De persze itt is a kód vizsgálata szükséges. Jelen fázisban nem tudom, hogy az EasyUI-t írták meg ennyire rosszul, vagy ti használjátok kevéssé optimálisan.