- Kod: Zaznacz cały
<body>
<ul id="list">
<li>
<a href="http://example.org">
<img src="http://example.org/example.jpg" alt>
</a>
</li>
</ul>
</body>
Który selektor jest szybszy/wydajniejszy w przeglądarce? i dlaczego?
Kod 1
- Kod: Zaznacz cały
#list > li > a > img {border:1px solid #f00}
Kod 2
- Kod: Zaznacz cały
#list > * > * > * {border:1px solid #f00}
Zauważcie, że ogólnie selektor gwiazdki "*" jest mało wydajny, kiedy używamy go np. w ten sposób
- Kod: Zaznacz cały
* {margin:0;}
Ponieważ margines będzie stosowany do każdego elementu, mimo iż nie jest to potrzebne (np. span nie posiada marginesów)
Z kolei w moim przykładzie, element img jest jedynym dzieckiem, więc stosowanie gwiazdki do wszystkich dzieci ma sens.
Kwestia czy przeglądarka w przypadku gwiazdki będzie szybsza od wskazania na element span?
Wydaje mi się że w przypadku gwiazdki, przeglądarka nie musi sprawdzać jaki stoi tam element, a w przypadku span, sprawdza czy selektor pasuje do elementu który jest dzieckiem i jest dodatkowo elementem span.