MozillaPL.org - polskie centrum Mozilli

Główne menu:

Który selektor CSS będzie szybszy w Firefox

Jak tworzyć strony WWW zgodnie ze standardami

Moderator: Pomocy?!

Który selektor CSS będzie szybszy w Firefox

Postautor: Zwirek » 21 sierpnia 2013, 09:34

Przeglądarka: Mozilla/5.0 (Windows NT 6.1; WOW64; rv:23.0) Gecko/20100101 Firefox/23.0

Kod HTML (załóżmy, że tych elementów li z obrazkami jest kilka tysięcy)

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.
Zwirek
 

Odp: Który selektor CSS będzie szybszy w Firefox

Postautor: Gość » 21 sierpnia 2013, 10:13

Przeglądarka: Mozilla/5.0 (Windows NT 6.1; WOW64; rv:23.0) Gecko/20100101 Firefox/23.0

Małe sprostowanie, oczywiście zamiast elementu span cały czas chodzi o element img
Gość
 

Odp: Który selektor CSS będzie szybszy w Firefox

Postautor: dexter » 21 sierpnia 2013, 10:16

Przeglądarka: Mozilla/5.0 (Windows NT 5.1; rv:26.0) Gecko/20100101 Firefox/26.0

Zwirek pisze: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;}


Z kolei w moim przykładzie, element img jest jedynym dzieckiem, więc stosowanie gwiazdki do wszystkich dzieci ma sens.


Kod 1 pewnie będzie szybszy; niedużo, o jakieś 3%. W kodzie 2 najpierw wywoływane są 3 niewydajne selektory uniwersalne, potem szybki selektor #id. W kodzie 1 najpierw 3 selektory tagów, potem też szybki #id.

Zwirek pisze:Kwestia czy przeglądarka w przypadku gwiazdki będzie szybsza od wskazania na element img?
Wydaje mi się że w przypadku gwiazdki, przeglądarka nie musi sprawdzać jaki stoi tam element, a w przypadku img, sprawdza czy selektor pasuje do elementu który jest dzieckiem i jest dodatkowo elementem img.


Miałbyś rację, gdyby selektory były wywoływane od lewej do prawej. Niestety jest na odwrót :mrgreen:. A więc ostatni selektor determinuje szybkość całej reguły.
dexter
Moderator
 
Posty: 7548
Z nami od: 02 października 2004, 21:30

Odp: Który selektor CSS będzie szybszy w Firefox

Postautor: Gość » 21 sierpnia 2013, 11:06

Przeglądarka: Mozilla/5.0 (Windows NT 6.1; WOW64; rv:23.0) Gecko/20100101 Firefox/23.0

Rzeczywiście, zapomniałem o tej regule, że przeglądarki czytają selektory od końca, czyli od prawej do lewej.
W takim wypadku rzeczywiście wydaje się sensowne nie używać selektora gwiazdki.

No dobrze a idąc dalej, co będzie szybsze/wydajniejsze? i dlaczego?
1.
Kod: Zaznacz cały
#list > li > a > img {border:1px solid #f00}

2.
Kod: Zaznacz cały
#list img {border:1px solid #f00}
Gość
 

Odp: Który selektor CSS będzie szybszy w Firefox

Postautor: dexter » 21 sierpnia 2013, 11:26

Przeglądarka: Mozilla/5.0 (Windows NT 5.1; rv:26.0) Gecko/20100101 Firefox/26.0

Na oko nie zgadnę, trzeba by przetestować.

Na tej stronie masz przykład do testowania selektorów: http://stevesouders.com/efws/css-selectors/child.php . Napisz po prostu coś takiego, odpowiadającego twojemu przypadkowi i wytestuj.
dexter
Moderator
 
Posty: 7548
Z nami od: 02 października 2004, 21:30

Odp: Który selektor CSS będzie szybszy w Firefox

Postautor: Zwirek » 21 sierpnia 2013, 11:31

Przeglądarka: Mozilla/5.0 (Windows NT 6.1; WOW64; rv:23.0) Gecko/20100101 Firefox/23.0

Dzięki za odpowiedzi i link :)
Zwirek
 


Wróć do Tworzenie stron WWW

Kto jest online

Zarejestrowani użytkownicy: Bing [Bot], dexter

Przejdź do powiązanej strony

Nawigacja:

Stopka: