Über das Selectors API wurde hier schon mehrfach berichtet. Nun hat mich Daniel Wiegand auf etwas hingewiesen: in der YUI gibt es ebenfalls etwas zum Überprüfen von CSS-Selektoren auf den DOM-Tree: das Selector Utility, das zwar eine ähnliche Funktionalität bietet, streng genommen aber keine Implementierung des Selectors API darstellt.
Ein Blick auf die Performance: Wie schlagen sich hier die beiden Javascript-Lösungen im Vergleich zur nativ in den Browser eingebauten Variante von Webkit? Und wie schnell sind verschiedene Browser bei den einzelnen Disziplinen im Vergleich?
Angetreten sind hierbei drei Kandidaten in vier Disziplinen:
- Mozilla Firefox 3.0.1
- Opera 9.51 und
- Safari 3.1.2
werden getestet in
- 1. Selectors API – find all (alle DOM-Elemente finden)
- 2. Selectors API – find first (nur das erste DOM-Element finden)
- 3. YUI selector – find all (analog zu 1.)
- 4. YUI selector – find first (analog zu 2.)
In allen Diagrammen gilt: kürzer heißt schneller heißt besser.
In diesen Tests wird die Performance-Überlegenheit des nativ in Webkit eingebauten Selectors API gegenüber einer Javascript-Implementierung mittels base2.DOM deutlich. So musste die Anzahl der Iterationen von ursprünglich 10 auf 100 erhöht werden um in Safari messbare Ergebnisse zu erhalten. Firefox 3 und Opera 9.5 hinken hier gewaltig hinterher.
Die nächsten Diagramme zeigen die Ergebnisse von Test 3.) und 4.):
Auch hier kann sich der Safari klar von Firefox und Opera absetzen, allerdings ist der Firefox diesmal etwas schneller als der Opera. Der Safari profitiert deutlich von seiner sehr schnellen Javascript-Engine.
Am Ende ein Vergleich aller Performance-Daten:
Nach diesen Zahlen ist die Implementierung des Selectors API mittels base2.DOM meist schneller als die Nutzung des Selector Utility der YUI. Unerwartet deutlich sind dagegen die Vorteile einer nativ eingebauten Implementierung, bei dieser Verarbeitungsleistung steht einem Einsatz der Selectors API eigentlich nichts mehr im Wege.
Das Test-Senario: Auf ein simples Test-XHTML-Dokument verschiedene CSS-Selektoren überprüft, nicht alle sind im Dokument vertreten, einige dagegen mehrfach. Ein Durchlauf besteht aus 100 Iterationen über das Testarray bestehend aus 10 Selektoren. Aus den Ergebnissen von 5 Testdurchläufen wird jeweils das arithmetische Mittel gebildet.
In den Tests der Selectors API nutzen Firefox und Opera die base2.DOM Implementierung (da sie keine native Unterstützung bieten) – Safari macht von der in Webkit eingebauten Version Gebrauch. Alle Entwickler-Erweiterungen und Tools wie Firebug für Firefox oder Dragonfly für Opera waren deaktiviert.
Als Testsystem diente ein Apple MacBook Pro (2.5 GHz Intel Core 2 Duo Prozessor und 4 GB RAM) mit Mac OS X 10.5.4.
Die Testdokumente sowie ein PDF mit allen Ergebnissen sind hier zu finden:
Einen Test auf Microsofts Internet Explorer konnte ich leider nicht durchführen da ich kein natives Windows mehr besitze.
Außerdem ist noch anzumerken dass dieser Test keinen Anspruch auf wissenschaftliche Korrektheit, noch auf Vollständigkeit oder Alltagstauglichkeit erhebt. Er dient nur zum einfachen Überblick über die mir bekannten Methoden anhand von CSS-Selektoren Elemente innerhalb eines DOM-Trees zu finden.