Geschwindigkeit von CSS-Selektoren

[ChrisB]

Hi,

Kürzlich hab' ich irgendwo ein Benchmark zur Geschwindigkeit von JavaScript-Selektor-Engines gesehen. Die meisten Engines arbeiten deutlich schneller wenn man man anstatt #foo z.B. div#foo im Selektor notiert auf jQuery trifft das besonders zu).

Nun die Frage: ist das auch für CSS selbst relevant - sprich ist der Browser schneller wenn er div#foo selektiert oder doch lieber *[id=foo].

Beide Tätigkeiten (Selektion eines Elements per JS-Selektor-Engine und Ermittlung, welche CSS-Selektoren auf ein Element zutreffen), erfordern Traversing des DOM, und das je nach Selektor in teilweise sehr umfangreicher Form.
Bei der Anwendung von CSS dürfte es zwar generell performanter geschehen - weil es im Browser nativ implementiert ist, und nicht erst eine "Zwischenschicht" eingezogen ist, wie bei einer JS-Selektor-Engine.
Aber prinzipiell dürften in beiden Fällen die gleichen Überlegungen Gültigkeit besitzen.

Natürlich ist dieses Beispiel sehr theoretisch - aber wie siehts mit banaleren dingen aus: div.foo vs. .foo vs. div#foo vs. #foo - wobei das Element nur 1x vorkommt.

Das ist in der Tat sehr theoretisch, und ohne Benchmarks für einzelne Testszenarien auch schwer eindeutig zu beantworten.

Google Page Speed hat jedoch unter "Optimize browser rendering" auch den Tipp, Use efficient CSS selectors - kannst du dir ja mal anschauen, und dir selber eine Meinung drüber bilden.

MfG ChrisB