Jeder von uns dürfte schon mit CSS Selektoren gearbeitet haben. Ob zum stylen von HTML oder selektieren von Elementen mit Hilfe der üblichen Javascript Bibliotheken (Prototype, jQuery, MooTools, …). Aber sind eure Selektoren auch effizient?

Wie sehen effiziente CSS Selektoren aus?

Natürlich sind einfache Selektoren wie #id oder .class super performant, doch häufig sieht man auch wilde Kombinationen die entweder schlichtweg unnötig sind oder stark vereinfacht werden können. Die Reihenfolge in Sachen Performance lautet -nach Steve Souders– folgendermaßen:

1. ID-Selektor #id
2. Klassen Selektor .class
3. Tag Selektor div
4. Nachbar Selektoren h2 + div
5. Direkte Kind Selektoren div > strong
6. Kind Selektoren div strong
7. Universelle (Wildchar) Selektoren *
8. Attribut Selektoren [attribute="value"]
9. Pseudo Selektoren :hover

Je mehr Selektoren (speziell die unten auf der Liste stehen) innerhalb einer Regel auftauchen, desto langsamer wird euer Code. Ganz einfach, oder?

Fangen wir mal mit was ganz alltäglichem an:

div#container ul#nav li {
   background: #fff;
}

Das Javascript äquivalent könnte in etwa so aussehen:

// Prototype Syntax:
$$('div#container ul#nav li').each(function($el) {
   $el.setStyle({background:'#fff'});
});

Der Selektor könnte aber auch einfacher (=performanter) sein:

#nav li {
   background: #fff;
}

Diese Lösung sollte genau so funktionieren, da IDs pro Seite immer einmalig sind – die Verschachtelung ist also unnötig. Im Javascript Code kann man übrigens noch mehr rauskitzeln:

// Prototype Syntax:
$('nav').select('li').each(function($el) {
   $el.setStyle({background:'#fff'});
});

// Or even better:
$('nav').select('li').invoke('setStyle', {background:'#fff'});

Die schlichten ID-Selektoren (quasi ein alias zu document.getElementById();) sind stehts die schnellsten. Diese findet man in Bibliotheken wie Prototype und MooTools wieder… jQuery dagegen verwendet IMMER CSS Selektoren.

Im letzten Code Beispiel wurde zuerst nach der ID selektiert und danach erst per Selektor. Der Sinn dahinter ist, das wir dadurch nicht im kompletten DOM suchen sondern nur in einem Teilbereich! Hier sehr ihr, wie die Syntax der verschiedenen Bibliotheken aussieht:

// Prototype Syntax:
var $prototype = $('nav').select('li');
// Or "$('nav').down('li');" for the first found element.

// MooTools Syntax
var $mootools = $('nav').getElements('li');
// Or "$('nav').getElement('li');" for the first found element.

// jQuery Syntax
var $jquery = $('#nav').find('li'); // Or "$('li', '#nav');"
// Or "$('#nav').find('li').first();" for the first found element.

Bei meiner Recherche habe ich haufenweise Webseiten gefunden die sämtliche Selektor-Details erläutern und Benchmarks präsentieren. Solltet ihr also eine spezifische Frage haben werdet ihr bestimmt schnell fündig 😉
Ansonsten gilt hier die gleiche Regel wie in vielen anderen Bereichen: weniger ist mehr (=einfache Selektoren sind effizienter)!

Bis zum nächsten mal wünsche ich euch Happy Coding aber natürlich auch frohe Weihnachten und besinnliche Festtage! Der nächste (und letzte Eintrag für dieses Jahr) kommt dann am 30.Dezember 2014.