CSS Performance zwischen Klasse und Attribut-Selektoren

Frage ich mich, ob es gibt ein performance-Problem mit Attribut-Selektoren anstelle der class-Selektoren.

div.test {}
div[test] {}

P. S. : ich bin nur daran interessiert, die CSS-performance, nicht JS.

InformationsquelleAutor Tot | 2014-03-09
  1. 0

    Gibt es kein performance-Problem. Beide handeln gleich. Aber es ist ein Unterschied in der Spezifität der css-Klasse gegenüber Elementen.

    Spezifität - Spezifität bestimmt, welche CSS-Regel angewendet wird von den Browsern.

    Wenn zwei Selektoren anwenden, um das gleiche element, das eine höhere Spezifität gewinnt.

    Aber Besonderheit Hierarchie.

    1. Inline-styles (Anwesenheit der Stil im Dokument).
      Ein inline-Stil Leben in Ihrem XHTML-Dokument. Es ist direkt angeschlossen an das element gestylt zu sein. E. g.
    2. IDs (# ID-Selektoren)
      ID ist ein Bezeichner für das Seiten-Elemente, z.B. #div.
    3. Klassen, Attribute und pseudo-Klassen (# von Klassen-Selektoren).
      Zu dieser Gruppe zählen .Klassen, [Attribute], und pseudo-Klassen wie :hover, :focus etc..
    4. - Elemente und pseudo-Elemente (# Element (Typ) Selektoren).
      Darunter zum Beispiel :before und :after.

    Quelle: http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/

    Daher div.test {} spezifischer ist.

    • Vielen Dank für Ihre Summe, und vielen Dank für diesen Artikel auch !
    • Ich hatte den Eindruck, dass die Frage war nicht, über die Besonderheit.
    • Hast du auch den text Lesen, die du zitiert hast? It-Gruppen, - Klassen und-Attribute zusammen, so dass Sie beide gleich, so div.test nicht genauer sein als div[test].
    • sorry, ich meinte Elemente.
    • Das macht einfach das ganze Teil über die Besonderheit dann irrelevant, da die Frage in der Tat zu Fragen über die Klassen und Attribute, nicht-Klassen und-Elementen. Wenn ich die OP hätte ich es wohl akzeptiert, Anthony beantworten, anstatt selbst wenn sein ist vor allem ein link-und ein single-Anweisung.
    • du hast Recht..Aber ich denke, der OP fragte mich abt Artikeln und Infos zu Lesen abt dieses Zeug..daher der link und Erklärung
    • In der Tat, je nachdem, welche kam, den letzten Willen den Vorrang haben, es sei denn, es ist in einem media-query

    InformationsquelleAutor Ani
  2. 10

    Laut dieser Artikel, class-Selektoren sind effizienter als Attribut-Selektoren.

    • Vielen Dank, interessanter Artikel. 🙂
    • Eckig-material-team erlebte enorme performance-Probleme mit IE11 zuletzt wegen der Verwendung von Attribut-Selektoren anstelle der class-Selektoren github.com/angular/material/issues/1771. Aber Chrome und Firefox scheint gut zu arbeiten mit dem Attribut-Selektoren.
    • dieser Artikel ist 7 Jahre alt. Dort sind alle aktuellen benchmarks?
    InformationsquelleAutor Anthony Atkinson
  3. 4

    Jemand hat tatsächlich erstellt ein real life selector-test, präsentiert selector passende Leistung.

    Die Tabelle zeigt, dass die Attribut-Selektoren sind etwa 3x langsamer im Vergleich zu standard-Klassen.

    Sich auf Attribut-Selektoren erfordert auch mehr Zeichen auf den Gegner ein element. Es ist besser zu definieren kurz und prägnant Klassennamen halten Sie Ihr stylesheet klein.

    Beispiel:

    //17 Characters (attribute)
[title="example"] {
 ...
}

//6 Characters (class)
.title {
 ...
}

    http://scope.bitbucket.org/tests/selector-matching-performance/

    InformationsquelleAutor tyau
  4. 2

    Nach diesem Projekt gibt es keinen wirklichen performance-Problem.

    Überrascht uns, da die selector-performance wurde noch nicht eine echte
    Sorge in unseren Tag-zu-Tag Arbeit für eine Weile. Front-end-performance ist ein
    große Sache, natürlich, aber CSS-Selektoren erscheinen zu beitragen solche
    winzige Menge, um die gesamte Ladezeit der Seite, dass es nicht auftreten
    uns, dass es sein könnte, ein wichtiges Anliegen für viele Menschen.

    Haben Sie benchmarks sowie.

    https://github.com/amcss/am-benchmarks

    InformationsquelleAutor PEZO
Schreibe einen Kommentar