it-swarm.com.de

Warum stimmen Browser mit CSS-Selektoren von rechts nach links überein?

CSS-Selektoren werden von Browser-Engines von rechts nach links abgeglichen. Also suchen sie zuerst die Kinder und überprüfen dann ihre Eltern, um festzustellen, ob sie mit den übrigen Teilen der Regel übereinstimmen.

  1. Warum ist das?
  2. Ist es nur, weil die Spezifikation sagt?
  3. Beeinflusst es das eventuelle Layout, wenn es von links nach rechts ausgewertet wurde?

Für mich wäre es am einfachsten, die Selektoren mit der geringsten Anzahl von Elementen zu verwenden. Also zuerst IDs (da sie nur 1 Element zurückgeben sollten). Dann vielleicht Klassen oder ein Element, das die geringste Anzahl von Knoten hat - z. Die Seite darf nur einen Bereich enthalten. Wechseln Sie daher mit einer Regel, die auf einen Bereich verweist, direkt zu diesem Knoten.

Hier sind einige Links, die meine Behauptungen belegen

  1. http://code.google.com/speed/page-speed/docs/rendering.html
  2. https://developer.mozilla.org/en/Writing_Efficient_CSS

Es klingt so, als ob dies so gemacht wird, um zu vermeiden, dass alle Kinder des Elternteils (die viele sein könnten) und nicht alle Eltern eines Kindes, das eines sein muss, angeschaut werden müssen. Selbst wenn das DOM tief ist, wird beim RTL-Abgleich nur ein Knoten pro Ebene und nicht mehrere geprüft. Ist es einfacher/schneller, die CSS-Selektoren LTR oder RTL zu bewerten?

533
tgandrews

Beachten Sie, dass ein Browser, der einen Selektorabgleich durchführt, ein Element (das Element, für das der Stil bestimmt werden soll) sowie alle Ihre Regeln und ihre Selektoren enthält und ermitteln muss, welche Regeln mit dem Element übereinstimmen. Dies unterscheidet sich beispielsweise von der üblichen jQuery-Sache, bei der Sie nur einen Selektor haben und alle Elemente finden müssen, die diesem Selektor entsprechen.

Wenn Sie nur einen Selektor und nur ein Element hatten, das mit diesem Selektor verglichen werden konnte, ist es in einigen Fällen sinnvoller, von links nach rechts zu arbeiten. Aber das ist definitiv nicht die Situation des Browsers. Der Browser versucht, Google Mail oder was auch immer zu rendern und hat den einen <span> Es versucht zu stylen und die über 10.000 Regeln, die Google Mail in sein Stylesheet einfügt (ich erfinde diese Nummer nicht).

Insbesondere in der Situation, in der der Browser die meisten von ihm in Betracht gezogenen Selektoren ansieht , stimmen sie nicht mit dem betreffenden Element überein . Das Problem besteht also darin, zu entscheiden, dass ein Selektor nicht so schnell wie möglich übereinstimmt. Wenn dies in den Fällen, die nicht übereinstimmen, etwas zusätzliche Arbeit erfordert, gewinnen Sie immer noch, da Sie in den Fällen, die nicht übereinstimmen, viel Arbeit gespart haben.

Wenn Sie anfangen, indem Sie nur den rechten Teil des Selektors mit Ihrem Element abgleichen, ist es wahrscheinlich, dass er nicht übereinstimmt, und Sie sind fertig. Wenn es passt, müssen Sie mehr arbeiten, aber nur proportional zu Ihrer Baumtiefe, die in den meisten Fällen nicht so groß ist.

Auf der anderen Seite, wenn Sie mit dem linken Teil des Selektors beginnen ... womit vergleichen Sie ihn? Sie müssen beginnen, das DOM zu durchlaufen, und nach Knoten suchen, die dazu passen könnten. Es kann schon eine Weile dauern, bis wir herausfinden, dass es nichts gibt, was zu diesem Teil ganz links passt.

Die Browser stimmen also von rechts überein. es gibt einen offensichtlichen Ausgangspunkt und lässt Sie die meisten Kandidaten-Selektoren sehr schnell loswerden. Sie können einige Daten unter http://groups.google.com/group/mozilla.dev.tech.layout/browse_thread/thread/b185e455a0b3562a/7db34de545c17665 (obwohl die Schreibweise verwirrend ist) anzeigen Das Ergebnis ist, dass Sie vor zwei Jahren für Gmail bei 70% der (Regel-, Element-) Paare feststellen konnten, dass die Regel nicht übereinstimmt, nachdem Sie nur die Tag-/Klassen-/ID-Teile des rechten Selektors für die Regel untersucht haben. Die entsprechende Anzahl für Mozillas Pageload-Leistungstestsuite betrug 72%. Es lohnt sich also wirklich zu versuchen, diese 2/3 aller Regeln so schnell wie möglich loszuwerden und sich dann nur noch darum zu kümmern, ob die restlichen 1/3 zusammenpassen.

Beachten Sie auch, dass es bereits andere Optimierungsbrowser gibt, die verhindern, dass auch nur Regeln gefunden werden, die definitiv nicht passen. Wenn zum Beispiel der Selektor ganz rechts eine ID hat und diese ID nicht mit der ID des Elements übereinstimmt, wird in Gecko kein Versuch unternommen, diesen Selektor überhaupt mit diesem Element abzugleichen: die Menge der "Selektoren mit IDs", die versucht werden stammt aus einer Hashtabellensuche für die ID des Elements. Das sind also 70% der Regeln, bei denen die Wahrscheinlichkeit einer Übereinstimmung recht hoch ist, die nach Berücksichtigung nur des Tags/der Klasse/der ID von immer noch nicht übereinstimmen der Selektor ganz rechts.

800
Boris Zbarsky

Parsing von rechts nach links, auch Bottom-Up-Parsing genannt, ist für den Browser effektiv.

Folgendes berücksichtigen:

#menu ul li a { color: #00f; }

Der Browser sucht zuerst nach a, dann nach li, dann nach ul und dann #menu.

Dies liegt daran, dass der Browser beim Scannen der Seite nur das aktuelle Element/den aktuellen Knoten und alle zuvor gescannten Knoten/Elemente anzeigen muss.

Zu beachten ist, dass der Browser die Verarbeitung startet, sobald er ein vollständiges Tag/einen vollständigen Knoten erhält und nicht auf die gesamte Seite warten muss, es sei denn, er findet ein Skript. In diesem Fall wird und vorübergehend angehalten Schließt die Ausführung des Skripts ab und geht dann weiter.

Wenn dies umgekehrt geschieht, ist dies ineffizient, da der Browser das gescannte Element bei der ersten Überprüfung gefunden hat, dann aber gezwungen war, das Dokument nach allen zusätzlichen Selektoren zu durchsuchen. Hierzu muss der Browser über das gesamte HTML-Format verfügen und möglicherweise die gesamte Seite scannen, bevor mit dem CSS-Malen begonnen wird.

Dies steht im Widerspruch dazu, wie die meisten Bibliotheken dom analysieren. Dort wird der Dom erstellt und es muss nicht die gesamte Seite gescannt werden, sondern nur das erste Element gefunden und dann weitere darin enthaltene Elemente abgeglichen werden.

29
aWebDeveloper

Es ermöglicht das Kaskadieren von der spezifischeren zur weniger spezifischen. Es ermöglicht auch einen Kurzschluss in der Anwendung. Wenn die spezifischere Regel für alle Aspekte gilt, für die die übergeordnete Regel gilt, werden alle übergeordneten Regeln ignoriert. Wenn das übergeordnete Bit andere Bits enthält, werden diese angewendet.

Wenn Sie umgekehrt vorgehen, formatieren Sie nach Eltern und überschreiben jedes Mal, wenn das Kind etwas anderes hat. Auf lange Sicht ist dies viel mehr Arbeit als das Ignorieren von Elementen in Regeln, für die bereits gesorgt wurde.

19