Sind css-Selektoren für Datenattribute schneller als Klassenselektoren?

Vor ein paar Monaten dieser Artikel wies darauf hin, dass die Klassen könnten eigentlich vermieden werden, alle zusammen von der website-Entwicklung.

Meine Frage ist, wie effizient sind die Daten-Selektoren im Vergleich zu class-Selektoren?

Ein einfaches Beispiel wäre ein Vergleich der Abfrage von Elementen mit data-component='something' versus Elemente mit class='class1 class2 something anotherClass'.

Den [data-<attr>='<value>'] selector überprüfen Sie den Wert als ganzes, anstatt die Klasse string, die geteilt werden soll. Mit diesem im Verstand, Daten-Attribute schneller sein soll.

So, zu verfeinern, die Frage, im Falle von CSS, sind wir besser dran, mit class-Selektor oder Daten-Selektor? Und aus javascript-Sicht jQuery("[data-component='something']") effizienter sein, als jQuery(".something")?

InformationsquelleAutor der Frage Vlad Nicula | 2012-09-19

  1. 22

    ich würde nicht nennen es schlüssigaber es scheint class-Selektoren sind schneller... ich habe nur diese zusammen für einen quickie-test.

    http://jsperf.com/data-selector-performance

    BEARBEITEN:

    Basierend auf Vlad und meine jsperf-tests... wenn die Leistung sorgen (vor allem IE)... die Klassen sind immer noch der Weg zu gehen

    InformationsquelleAutor der Antwort BLSully

  2. 9

    Nach dem Check-out BLSully Antwort und die Testseite er zur Verfügung gestellt, hier sind die aktuellen zahlen für den Vergleich.

    jQuery class-Selektor performance vs jQuery data-Attribut Selektor-performance-Operationen pro Sekunde:

    • 31% schneller in Chrom 27.0.1453
    • 140% schneller in Firefox 15.0.1
    • 131% schneller in Firefox 21.0
    • 1,267% schneller im IE 9.0
    • 1,356% schneller im IE 10.0

    InformationsquelleAutor der Antwort Zac

  3. 4

    Habe ich den Eindruck, dass die Leistung der Selektoren sind schnell genug, jetzt auch in der mobilen Browser die es gibt. Es sei denn, Sie wirklich plan zu verwenden Selektoren viel, Daten-Attribute oder-Klasse basiert, (in dem Fall würde ich vorschlagen, zu überdenken, Ihren code, um zu versuchen, um den cache der bereits abgefragt Selektoren) wir betrachten Sie nicht schlecht. Und ich würde sogar sagen, das ist nicht dramatisch, mit style über die anderen.

    Denke ich, dass Browser-Anbieter haben verbrachte mehr Zeit die Verbesserung der am meisten verwendeten Szenario (Abfrage gegen Klassen) als Abfrage-Selektoren. Das ändert sich und ich wäre nicht überrascht, wenn Sie beginnen mit der Optimierung anderen Fällen auch.

    InformationsquelleAutor der Antwort roy riojas

Schreibe einen Kommentar