ugrás a tartalomhoz

Efficiently Rendering CSS

Joó Ádám · 2010. Dec. 23. (Cs), 12.03
Milyen teljesítményvonzata van az egyes kiválasztóknak
 ■
1

Never do

Török Gábor · 2010. Dec. 23. (Cs), 14.40
Never do this:

ul#main-navigation { }

ID's are unique, so they don't need a tag name to go along with it. Doing so makes the selector less efficient.


Ez elég érdekes, én gyakran beleírom az elem nevét is az egyértelműség kedvéért. Ha ez a kiválasztó gyengébb, mint elemnév nélkül, akkor ezek szerint a böngésző előbb legyűjti az elemeket, és azok közül választja ki a megadott azonosítójút? Elég balga dolognak tűnik.
3

Nem az elemeket gyűjtik először

Endyl · 2010. Dec. 24. (P), 00.05
Ha jól tudom, ez annyiban kevésbé hatékony, hogy ha már úgyis megvan az adott azonosítójú elem, akkor a böngészőnek még feleslegesen azt is le kell ellenőriznie, hogy valóban az adott tagnévvel rendelkezik-e.

Tehát felesleges beleírni a tag-et css-be, hacsak nem változó, hogy mikor milyen típusú elem kapja az aktuális azonosítót, és mindegyik más fomázást kap, mert csak egy felesleges kör a plusz tagnév ellenőrzés.

Nyilván, ahogy írja is, a mai gépeknél az ebből adódó eltérés jobbára elhanyagolható.

[szerk]
Mondjuk egy ul#main_navigation kevésbé elvetemült és erőforrás pazarló, mint mondjuk egy body div.container ul li #home_link kombó. Ez utóbbi esetében ugyanis még azután, hogy gyorsan megtalálja ID alapján az elemet a böngésző, még vissza kell másznia a DOM-fán, hogy leellenőrizze a szülőket is (az összeset, egészen a body-ig).

Itt is áll, hogy hacsak nem változik az elem elhelyezésének függvényében a kinézete (ami csak felesleges bonyodalmakhoz vezet), akkor feleslegesen túráztatjuk a böngészőt a szülők egyeztetésével.

Tehát mivel ID-ből úgyis csak egy van egy odlalon, nagyon speciális, túlfinomított eseteket leszámítva, felesleges további kiválasztókat hozzáfűzni.
[/szerk]
6

Ha jól tudom, ez annyiban

Török Gábor · 2010. Dec. 27. (H), 14.24
Ha jól tudom, ez annyiban kevésbé hatékony, hogy ha már úgyis megvan az adott azonosítójú elem, akkor a böngészőnek még feleslegesen azt is le kell ellenőriznie, hogy valóban az adott tagnévvel rendelkezik-e.

Igazad van, felesleges. Ennek ellenére én néha szoktam alkalmazni, nem kell fejben tartanom/ellenőriznem, hogy a #nav az nav, div vagy ul volt. (Elnagyolt példa, de néha tényleg jól jön a szabályok írásánál, ha tudom.)

Másfelől úgy tudom én is, hogy hátulról dolgozza fel a kiválasztókat a böngésző. Viszont innentől kezdve ennyi optimalizációt igazán felvehettek volna még, hogy ha ID adott, akkor álljon le.
7

mire gondolsz? ha az id

Tyrael · 2010. Dec. 27. (H), 17.50
mire gondolsz? ha az id stimmel, attol meg nem sporolhatja meg a tagnev ellenorzeset, vagy szerinted ha megadsz egy ul#main-navigation -t, akkor az suljon el minden main-navigation id-ju elemre, meg akkor is, ha az nem ul?

Tyrael
10

Az alap feltevés az volt,

Török Gábor · 2010. Dec. 27. (H), 18.11
Az alap feltevés az volt, hogy ne írj ul#main-navigationt, hiszen annak ugyanaz a hatása, mint a #main-navigation-nak, lévén egy DOM-hoz tartozó elemeknek egyedi ID-juk kell, hogy legyen. Ahogy élhetünk ez utóbbi feltételezéssel, ugyanúgy feltehetjük azt is, hogy a ul#main-navigation vonatkozzon a <div id="main-navigation"></div>-re (is). Értem, hogy ez illogikus így, de invalid kód hatása lehet helytelen.
11

Nem invalid

Endyl · 2010. Dec. 27. (H), 20.01
Szerintem itt nem arról van szó, hogy nincs olyan eset, amikor szükséges/hasznos lenne az ID mellett a tagnév megadása is, hanem arról, hogy sokan olyan esetben is odaírják, amikor tényleg felesleges.

Mert lehet, hogy van, akinek a #main-navigation néha ul, néha ol, vagy más egyéb, de ezt egy CSS fájlban akarja letudni. Ekkor van értelme a további tesztelésnek, és a vonatkozó esetnek megfelelő stílus alkalmazható. Nem lenne túl szerencsés, ha ezt (a teljesen szabályos kiválasztót) a kliens program optimalizálás nevén kilőné.

A lényeg az, hogy a számunkra valóban szükséges kiválasztót használjuk. Azaz ne túráztassuk az értelmezőt feleslegesen, amikor egyszerűbben, hatékonyabban is meg lehet írni az adott stílusdeklarációt. Ugyanakkor ne csodálkozzunk, ha lassan jelenik meg az oldalunk, ha a böngészőnek mindeféle szükségtelen szabályon, feltételen is át kell rágnia magát.

Tényleg jó lenne egy eszköz, ami méri az egyes elemekre vonatkozó szabályok megtalálásának és alkalmazásának idejét. Így össze lehetne vetni a különböző "lépcsőzetességgel" megírt stíluslapok teljesítményét.
2

Teljesítmény mérés

Török Gábor · 2010. Dec. 23. (Cs), 14.42
Tud valaki arra eszközt, amivel vizsgálni tudom egy stíluslap teljesítményét renderelés szempontjából?
4

yslow/pagespeed valamelyike

Tyrael · 2010. Dec. 25. (Szo), 23.46
yslow/pagespeed valamelyike mintha listazna az inefficient selectorokat az adott oldalhoz tarozoan.

Tyrael
5

Valós mérés szerint

Török Gábor · 2010. Dec. 27. (H), 14.19
Úgy tudom, hogy CSS kiválasztok esetén ezek az eszközök a beléjük táplált statikus ismeretek szerint döntik el a hatékonyságot, nem az aktuális oldalon mért adatok szerint.

Olyan eszköz érdekelne, amivel a tényleges teljesítményt tudnám vizsgálni, amivel össze tudnék hasonlítani – praktikusan időben – két kiválasztót, amivel ténylegesen látnám, hogy a javasolt felírással 0.002 secet nyerek a renderelésnél.
8

amennyire en tudom, ezek az

Tyrael · 2010. Dec. 27. (H), 17.55
amennyire en tudom, ezek az eszkozok mar boven nem statikus guide-ok alapjan dolgoznak, sot pl. a chrome-hoz levo Speed Tracer-rel teljesen internal dolgokat lehet nyomon kovetni (tobbek kozott css/dom manipulacio idejet, etc.)
viszont ha neked mindenkeppen valami userland dolog kell, akkor ezt megsasolhatnad:
https://github.com/kamicane/slickspeed/
nem hasznaltam szemely szerint, a google dobta ki.

Tyrael
9

Görgetés?

presidento · 2010. Dec. 27. (H), 18.03
A CSS „nagyon-nagyon gyorsan feldolgozható”, a probléma vele, hogy nagyon sokszor újra kell számolni.

Én a finom görgetést szeretem, ez Firefox alatt jól testre szabható, azonban egyes oldalak borzasztóan lassan reagálnak, szinte használhatatlan, muszáj vagyok kikapcsolni... Szerintem így lehet lemérni az oldal stílusának teljesítményét. (Pl. megnézni az 1 pixelenkénti görgetés sebességét.) Persze, ez nem csupán a CSS sebességét adja vissza, de ha letiltott CSS-sel messze-messze gyorsabb, akkor lehet, érdemes gondolkodni, hogy mégsem kéne fix háttéren részben átlátszó tartalmat megjeleníteni... :P (Teszem hozzá, ha megnyitod ezt az oldalt két tabon, ahol az egyiken le van tiltva a stíluslap, észrevehetően hamarabb tudsz az eredetiről a puritánra átváltani, mint vissza - legalábbis, ha elég lassú a géped hozzá.)