Tietoa siitä, miksi *
:tä ei kannata käyttää ja miksi >
on loistava, on tärkeää ymmärtää, miten CSSDOM tehdään.
Kun sinulla on valitsija, vaikkapa div p .someclass
, selaimen on suoritettava kasa tarkistuksia.
Ensiksi selain kokoaa kaikki elementit, joissa on .someclass
. Tämä on melko helppo operaatio. Sitten se tarkistaa kaikkien keräämiensä .someclass
:ien kaikki vanhemmat ja katsoo, onko sillä p
-vanhempaa, ja hylkää ne, joilla ei ole p
-vanhempaa. Sitten se tarkistaa kaikkien niiden p-tunnisteiden vanhemmat, joilla oli .someclass
-lapsia, jotka se on kerännyt uudelleen div
-vanhempien varalta. Näin se selvittää, missä se on. Jos olisit siis voinut käyttää vain .specific-someclass
, se olisi tietysti ollut paljon halvempaa.
Tässä kohtaa >
:n arvo tulee esiin. Jos sinulla on div > p > .someclass
, kun selain tarkistaa p
vanhemmat .someclass
, se voi lopettaa heti. Sen tarvitsee kulkea vain yhden tason ylöspäin. Paljon halvempaa! Yritä aina käyttää suoraa jälkeläisvalitsinta, kun se on mahdollista, vaikka se ei olisikaan välttämätöntä.
Kun *
ilmestyy, selaimen on kerättävä kaikki sivun elementit. Tämä on kallis tehtävä, joten sitä on parempi välttää. Jos kyseessä on #some-very-specific-id *
, selain kerää ensin kaikki elementit ja tarkistaa sitten jokaisen elementin kohdalta, millä elementeillä on #some-very-specific-id
esi-isänä. Sivun jokainen verinen elementti tarkistetaan. Huono juju.
Pahoittelut, jos tietoni ovat vanhentuneita. Siitä on pitkä aika kun olen joutunut tietämään mitään CSS-maalauksesta.