Hogyan hatékonyabb a weblap? Javascript-tel vagy anélkül?
Van egy div-em. Ennek a div-nek vannak tulajdonságai css-ben:
.mybox{
width: 1%;
height: 10px;
display: inline-block;
}
Ezt beírom a html-be.
<div class="mybox" style="background:#000000 "></div>
Ekkor megjelenik a div.
A kérdés, hogy "hatékonyabb" a program, ha ebből a div-ből pl 100-et, vagy 1000-et szeretnék létrehozni?
Ha másolás beillesztéssel a html kódban létrehozogatom a div-eket, vagy írok egy javascript ciklust, ami ezt megcsinálja?
A hatékonyságot úgy értem, hogy hogy tölt be gyorsabban. Lehet akár több 10 ezer ilyen div is.
Köszi a válaszokat.





Ezt beírom a html-be.
<div class="mybox" style="background:#000000 "></div>
ezt ne írd be a html-be. style tag minek? add meg a css-ben a hátteret.
azontúl relatív. adatforgalom szempontjából nyilván a js kevesebb adatot jelent, ellenben a kliens oldalon dolgoztatja a procit (bár nem egy túl bonyolult feladat).
én ezt javaslom, mérd le. js-el és php-vel le lehet mérni ms-ra pontosan.




















#5 fejtsd ki kérlek...
pl egy ezer soros táblázatot (amit most elméletben egyszerre listázunk ki) és mobilböngészőkre optimalizáltan akarsz elkészíteni hogy a retekben lehet a div-ek "másolása" nélkül megoldani?
(most az mindegy, hogy a kódot egy php-s for ciklus generálja, hiszen az is csak másolgat)





Reszponzív táblázatokra vannak azért szép megoldások :), pl.:
(Igaz, a fejléc szövegeket itt is 2x adja meg, de nyilván kiküszöbölhető, ha maximalisták akarunk lenni.)





oké, de akkor pedig ezt "másolgatod"
<tr>
<td>James</td>
<td>Matman</td>
<td>Chief Sandwich Eater</td>
</tr>
<tr>
<td>The</td>
<td>Tick</td>
<td>Crimefighter Sorta</td>
</tr>
szerintem itt nem is ezen van a hangsúly. a lényeg, hogy nagy mennyiségű adat esetén hogyan hatékonyabb: kliens vagy szerver oldalon?
mondjuk szerintem szerver oldalon, hiszen az adat tömöríthető az átvitelhez (mostanra a böngészők már elég jól támogatják) tehát ezáltal sokat spóroltunk. így nem a js-t és a böngészőt terheljük ezzel.
(arról nem is beszélve, hogy az adatokat amivel feltöltjük át kell valamilyen formában adni ígyis-úgyis tehát akkor már majdnem ugyanott vagyunk)





de ez amúgy egy érdekes elméleti probléma, viszont fontos kiemelni, hogy a gyakorlatban nincs olyan eset, hogy erre szükség lenne, hiszen 50-100 sornál többet nem jelenítünk meg egyszerre. utána "lapozunk" :)
egyébként az infinite scroll még ami erről eszembe jut. (na az még egy borzalmas találmány bizonyos esetekben) találkoztam olyan weboldallal, ami a komplett rendszermemóriát felzabálta ha elég sokat görgettem :)





Kapcsolódó kérdések:
Minden jog fenntartva © 2025, www.gyakorikerdesek.hu
GYIK | Szabályzat | Jogi nyilatkozat | Adatvédelem | Cookie beállítások | WebMinute Kft. | Facebook | Kapcsolat: info(kukac)gyakorikerdesek.hu
Ha kifogással szeretne élni valamely tartalommal kapcsolatban, kérjük jelezze e-mailes elérhetőségünkön!