Warum sind Selektoren wie ein [title = „home“] langsamer als Klasse verwenden?

Question

ich viele CSS Performance Artikel, wie zum Beispiel gelesen haben;

• Efficiently Rendering CSS
• Writing efficient CSS selectors
• Writing efficient CSS

ich warum Selektoren wie diese sind schlecht

#social a { 
} 

Als Browser ein zuerst liest, dann gezwungen ist, Schleife durch alle <ein>-Tags in der Seite.

Aber warum ist ein Selektor wie a [title = "home"] langsamer als eine Klasse verwenden?

Ich gehe davon aus, dass der Browser eine Art Index erstellt, um herauszufinden, welche Elemente eine bestimmte Klasse haben (Richtig?).

Aber sollten Browser nicht auch indiziert haben, welche Elemente ein bestimmtes Attribut haben? (Wie Titel)?

Meine Frage ist; Warum ist das CSS/Element bei Verwendung von Selektoren wie a [title = "home"] im Vergleich zur Verwendung einer Klasse viel langsamer? Was oder wie geht der Browser vor, damit das Ergebnis so viel langsamer ist?

Answer 1

Browser Implementierer optimieren die häufigsten Fälle. Da Klassen sehr häufig zum Anpassen von Stilen verwendet werden, müssen sie dies so effizient wie möglich implementieren. Wenn sie in CSS geladen werden, indexieren sie die Klassen, um dies zu ermöglichen.

Da zufällige Selektoren wie title="home" nicht sehr häufig verwendet werden, können sie sie mit einfacheren Suchen implementieren. Es wird nicht so viel Einfluss auf die Leistung haben, da es selten verwendet wird.

Klassen erfordern auch eine spezielle Behandlung im Browser, da ein Element mehrere Klassen aufweisen kann, z. class="foo bar baz". Wenn das Dokument Parsen, muss der Browser diese aufzuspalten, so dass es einer von ihnen gegen die CSS-Selektoren mithalten können.

Answer 2

Benchmark

Schlussfolgerungen

In den meisten Attributselektor‘Fälle mit unbekanntem Attribute, z.B. [a = "b"] 'und' Attributselektor mit bekanntem Attribut, z. [title = "a"] tauchte in der Kategorie "3 Worst" auf. Es ist sicher zu sagen, dass Sie diese Selektoren vermeiden sollten.