Menu

Developers

Efficiëntie CSS selectors

28 maart 2011

Met de snelheid waarmee browsers tegenwoordig CSS parsen hoeven we er bijna niet meer bij stil te staan, maar welke notatie is nu eigenlijk het snelst en meest efficiënt?

We merken het nu niet meer, maar er zit wel degelijk een verschil in de snelheid van de selectors welke gebruikt worden in CSS. Het valt onder te verdelen in ID, class, tag, en universal. Dit is ook direct de volgorde van efficiëntie. Selectors op ID zijn het meest efficiënt, universele selectors het minst.

  • ID:          #content
  • Class:      .chapter
  • Tag:         ul
  • Universal: *

Neem nu de volgende twee voorbeelden:

#content ul
ul

Je zou denken dat het eerste voorbeeld sneller zou zijn, aangezien je verwacht dat de browser eerst een element met het ID #content opzoekt, waarna hij alle <ul>-tags opzoekt die in dat element voorkomen. De browser parsed echter van rechts naar links. Dus hij zal eerst alle <ul>-tags opzoeken, waarna hij kijkt welke van deze in een element voorkomen met het ID #content.

Een van de traagste manieren is er dus een zoals deze:

body div a img
In feite zijn de nieuwe CSS3 selectors (bv. :first-child of :last-child) ook relatief langzaam.

De snelst te parsen CSS gebruikt alleen maar ID's, echter is dit totaal niet onderhoudbaar (elk element zou dan een uniek ID moeten hebben).
Houdt dus in de gaten welke selectors je gebruikt. Is het een uniek element, gebruik een ID, komt hetzelfde element vaker voor, gebruik dan een class. Probeer de universele selectors in elk geval zoveel mogelijk te vermijden.

blog comments powered by Disqus

Nieuwsbrief ontvangen?

Velden met een * zijn verplicht

Like ons op Facebook

Klik hieronder om ons te liken op Facebook.