Ostatnimi dniami chyba panuje wysyp moich trudnych pytań, na które mało kto zna odpowiedzi, ale co tam.

Mianowicie, mam element w DOM:


Czy uszczegółowanie selektora do postaci:

[CSS] pobierz, plaintext 
body > tag > tag2 > #ident
[CSS] pobierz, plaintext 

będzie lepiej rzutować na wydajność aniżeli samo:

[CSS] pobierz, plaintext 
#ident
[CSS] pobierz, plaintext 

?

Z tego, co wiem, to ponoć ten drugi wystarczy, ale przyznam, że nie znam budowy engine'ów przeglądarek do wyszukiwania po DOM, dlatego pytam. Przegoogle'owując przy okazji, oczywiście. Ale opiniami praktyków nie pogardzę.

http://www.stevesouders.com/blog/2009/06/1...-css-selectors/



Ale szczerze mówiąc nie przywiązywałbym do tego tak ogromnej wagi.
Poza tym budując reguły według 1 zasady zarąbałbyś się na śmierć tworząc wszystkie możliwe zagnieżdżenia selektorów.

Nie do końca jest tak, jak tam napisano. Bowiem:

http://css-tricks.com/more-on-css-selector-performance/

+ ludzie na Blipie mi uświadomili, że selektory są parsowane począwszy od prawej. Przeglądarka wyciąga wszystkie elementy pasujące do skrajnego prawego selektora, a potem już tylko filtruje wyciągnięte. Więc potwory w stylu:

[CSS] pobierz, plaintext 
#subkontener element
[CSS] pobierz, plaintext 

Wyciągnie najpierw wszystkie element z dokumentu, dopiero potem sprawdzi dla każdego, czy #subkontener jest rodzicem któregoś z nich.

Zrujnowało to moje wiadomości o CSS, ale człowiek się przecież ciągle uczy.

A jak ludzie z Blip-a Ci to udowodnili? Sprawdziłeś?

Poza tym wysłałeś link do prezentacji tego samego autora z którego wynika iż opcja pierwsza jest wolniejsza.

Linki do MDC, to mało?

Może zacznijmy od tego, że wydajności selektorów z pierwszego postu nie powinno się porównywać, ponieważ... są to dwa różne selektory (tj. wyłapują one inne elementy).

Co prawda nie mam tutaj nic na poparcie poniższej tezy (nawet nie jestem w pełni przekonany jej słuszności), ale z tego co się orientuję przeglądarki zapisują sobie swego rodzaju referencje do elementów posiadających identyfikatory (mowa oczywiście o dokumentach HTML) celem szybszego dotarcia do nich. Tak więc drugi selektor wymagałby jedynie odnalezienia odpowiedniej referencji, pierwszy natomiast dodatkowo wymagałby sprawdzenia czy reszta warunków selektora pasuje. Nie jestem jednak pewien czy taki mechanizm ma miejsce w przypadku CSSa (tutaj powód: http://www.jsfiddle.net/Gwr9E/ )