wydajność selektorów Opcje

[erix]

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

Mianowicie, mam element w DOM:

Kod

body
-- tag
---- tag2
------ #ident

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

[wookieb]

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

It’s clear that CSS selectors with a key selector that matches many elements can noticeably slow down web pages. Other examples of CSS selectors where the key selector might create a lot of work for the browser include:

[CSS] pobierz, plaintext 
A.class0007 DIV {}
#id0007 > A {}
.class0007 [href] {}
DIV:first-child {}
[CSS] pobierz, plaintext 

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.

[erix]

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.

[wookieb]

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.

Ten post edytował wookieb 21.10.2010, 20:52:31

[erix]

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

Linki do MDC, to mało?

[Crozin]

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/ )