Dlaczego selektory takie jak [title = "home"] są wolniejsze niż używanie klasy?

Przeczytałem wiele artykułów o wydajności CSS, takich jak;Dlaczego selektory takie jak [title = "home"] są wolniejsze niż używanie klasy?

otrzymuję dlaczego selektorów takie jak ten są złe

#social a { 
}

W przeglądarce zostanie odczytany pierwszy, a następnie zmuszony do przechodzić przez wszystkie <a> znaczniki na stronie.

Ale dlaczego to selektor takich jak w [title = "home"] wolniej niż przy użyciu klasę?

Zakładam, że przeglądarka tworzy jakiś indeks, aby móc określić, które elementy mają określoną klasę (poprawna?).

Ale czy przeglądarki nie powinny również indeksować, które elementy mają określony atrybut? (taki jak title)?

Moje pytanie to; dlaczego CSS/element wygląda znacznie wolniej, gdy używa się selektorów, takich jak a [title = "home"] w porównaniu do korzystania z klasy ? Co lub jak działa przeglądarka, aby wynik był o wiele wolniejszy?

Źródło

2013-08-30 corgrath

"Ale czy przeglądarki nie powinny również indeksować, które elementy mają określony atrybut?" - czy myślisz, że to ma sens? Klasa mówi coś w stylu "Hej, jestem tego typu, każdy może coś ze mną zrobić!" podczas gdy atrybut zastępczy mówi "Yo, przeglądarki, renderuj mnie w ten sposób, a potem zapomnij o mnie".A ponieważ indeksowanie zajmuje trochę czasu, myślę, że przeglądarki decydują się na indeksowanie tylko pierwszego rodzaju atrybutów. – contradictioned

FYI, termin "uniwersalny selektor" odnosi się konkretnie do selektora '*'. 'a [title =" home "]' nie jest uniwersalnym selektorem; '[title =" home "]' bez 'a', z drugiej strony, można powiedzieć, że używa * niejawnego * uniwersalnego selektora, ponieważ jest to równoważne' * [title = "home"] '. – BoltClock

Ponadto "Ponieważ przeglądarka przeczyta pierwszą, a następnie jest zmuszona do przechodzenia przez wszystkie znaczniki na stronie." Nie jest to zachowanie głównych przeglądarek; zobacz http://stackoverflow.com/questions/5797014/why-do-browsers-match-css-selectors-from-right-to-left – BoltClock

Implementatory przeglądarki optymalizują najczęstsze przypadki. Ponieważ klasy są często używane do dopasowywania stylów, muszą implementować je tak skutecznie, jak tylko mogą. Po załadowaniu w CSS indeksują klasy, aby było to możliwe.

Ponieważ losowe selektory, takie jak title="home", nie są często używane, mogą odejść od wdrożenia ich przy użyciu prostszych wyszukiwań. Nie będzie to miało tak dużego wpływu na wydajność, ponieważ rzadko będzie używane.

Klasy wymagają również specjalnego traktowania w przeglądarce, ponieważ element może mieć wiele klas, np. class="foo bar baz". Podczas analizowania dokumentu przeglądarka musi podzielić to, aby mógł dopasować dowolny z nich do selektorów CSS.

Źródło

2013-08-30 09:22:30 Barmar

Więc twoja odpowiedź jest w zasadzie, nowoczesne przeglądarki tworzą indeksy dla klas, ale nie dla żadnego inne atrybuty. Czy zatem użycie dowolnego innego atrybutu niż atrybut klasy spowoduje, że będzie on wolniejszy? – corgrath

Tak. Klasy i identyfikatory są przeznaczone do użycia w selektorach, więc zostały zoptymalizowane pod kątem tego zastosowania. – Barmar

Należy zauważyć, że z tego powodu użycie selektora atrybutu do dopasowania atrybutem "klasa" nie jest zoptymalizowane. (Poza tym, jeśli używasz selektorów atrybutu do dopasowywania nazw klas, prawdopodobnie próbujesz dopasować za pomocą specjalnych kryteriów, których nie można osiągnąć za pomocą selektora klasy). – BoltClock

Benchmark

Wnioski

selektor atrybutu większości przypadków”o nieznanej atrybutu, np [a = "b"] "i" selektor atrybutów o znanym atrybucie, np. [title = "a"] "pojawił się w kategorii" 3 Worst ". Można bezpiecznie powiedzieć, że należy unikać tych selektorów.

Źródło

2013-08-30 09:28:29

Dlaczego przetestowałeś takie stare wersje przeglądarki? – Barmar

@Barmar: On nie był tym, który napisał te testy. Steve Souders to zrobił. Artykuł, z którego pochodzi wykres, został napisany 4 lata temu. – BoltClock

Żadna ze stron testowych nie używa selektorów takich jak 'a [title =" home "]'. – Barmar

Dlaczego selektory takie jak [title = "home"] są wolniejsze niż używanie klasy?

Odpowiedz

Powiązane problemy