CSS-Selektoren und Performance
Shaun Inman schlug vor ein paar Wochen die Einführung neuer Selektoren für CSS vor, mit deren Hilfe man sich auf das Elternelement beziehen könne. Er nennt sie "qualified selectors". Diese Selektoren haben einen gewissen Charme. Man könnte damit wenn/dann-Beziehungen abbilden, die sich derzeit nur mit Javascript abbilden lassen. John Resig schlug umgehend eine jQuery-Variante vor. Eric Meyer bemerkte in einem Kommentar, daß dieser Selektor schon häufig in der zuständigen W3C-Gruppe vorgeschlagen und wieder abgelehnt wurde. Viel interessanter - und bedenklicher - finde ich allerdings den Kommentar von Dave Hyatt - Chefentwickler von Webkit, der Safari-Browserengine. Er gibt ein starkes Statement gegen moderne CSS3-Selektoren ab:
"The sad truth about CSS3 selectors is that they really shouldn’t be used at all if you care about page performance. Decorating your markup with classes and ids and matching purely on those while avoiding all uses of sibling, descendant and child selectors will actually make a page perform significantly better in all browsers."
Jon Sykes unterfüttert dieses Statement mit einem breiter angelegten Performancetest. Das interessanteste an seinem Ergebnis finde ich, daß sich IE und Safari stark gleichen, während beim Firefox sich kaum Unterschiede in den Untersuchungsgegenständen ausmachen lassen. Die Performanceunterschiede selber finde ich logisch und erklärbar. Je allgemeiner die Regeln werden und je weiter weg die Regeln von den Elementen sind - also keine Inline-Styles - umso mehr muss der Browser das gesamte DOM analysieren. Das dauert natürlich.
Diese Erkenntnis besagt nichts anderes, als daß wir uns einen Vorteil auf Kosten eines Nachteils erkaufen. Das ist doch normal. Denkt an all diejenigen, die mit dem Rauchen aufhören, ihre Nervosität nun aber mit Schokolade bekämpfen und deshalb zunehmen.
Hyatts Schlußfolgerung finde ich falsch. Wir sollten nicht aufhören, CSS3-Selektoren zu nutzen oder von vornherein mit ihnen abschließen. Wir sollten auch nicht jedem Element eine ID geben oder gleich zu Inline-Styles übergehen. Wir sollten auch nicht wieder zu Styling mit HTML übergehen. Hyatt und seine Kollegen sollten sich allerdings daran machen, ihre Browser zu verbessern, die Performance zu steigern. In diesem Falle zeigt mal wieder ein Finger nach vorne aber vier auf einen selber zurück.
- ← Previous
Einführung in CSS3 - Next →
Erste Stimmen zum neuen Firefox