CSS selector snelheid

[famlam]

Weet iemand hoe ik kan meten hoeveel keer zo snel

#id {color:red}
.class {color:blue}

zijn dan

[id="id"] {color:red}
[class="class"] {color:red}

Ik ben namelijk één van de programmeurs van AdBlockforChrome, en sommige filterlijsten bevatten [id="..."] en [class="..."] regels die ook als #... en .... geschreven zouden kunnen worden. Echter, ik weet niet hoe ik erachter kan komen hoe snel een css selector werkt. Want ik moet bepalen of de conversie van [class="b"] naar .b rendabel is, i.c.m. de hogere snelheid van die selector...

 

[ScorpionX]

Hai,

Ik denk eerlijk gezegd niet dat er een snelheidsverschil in zit. Je zou het kunnen testen met een javascriptje die de tijd van het laden van de pagina weergeeft in miliseconden. op google genoeg van dat soort scriptjes te vinden.

snelheidswinst/verlies zal er denk ik niet zijn wel is het gebruik van . en # misschien iets overzichtelijker.

 

[That Guy]

snelheidswinst/verlies zal er denk ik niet zijn

Nou, denk het eigenlijk wel. Hoewel er in principe geen verschil in zit, zullen browsers er toch anders mee omgaan. En, de lijst(en) van ABP zijn redelijk groot, wat dus uiteindelijk wel wat uitmaakt.



Zelf weet ik er niet zoveel van, maar bekijk deze eens.

Using Speed Tracer you are able to get a better picture of where time is being spent in your application. This includes problems caused by:

[...]

* CSS style recalculation and selector matching

Zie ook: hier.

 

[famlam]

Nou, denk het eigenlijk wel. Hoewel er in principe geen verschil in zit, zullen browsers er toch anders mee omgaan. En, de lijst(en) van ABP zijn redelijk groot, wat dus uiteindelijk wel wat uitmaakt.



Zelf weet ik er niet zoveel van, maar bekijk deze eens.
Zie ook: hier.

Dank je!
Met behulp van dat speed tracer heb ik ontdekt dat

100.000 [class/id="abc"] selectors 51 ms duren
100.000 .abc/#abc selectors 23 ms duren

De lijsten van abp zijn 100x zo klein (tenminste, de hoeveelheid selectorfilters), dus dat verschil is verwaarloosbaar.