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

CSS-Selektoren werden von Browser-Engines von rechts nach links abgeglichen. Also finden 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 der einfachste Weg, dies zu tun, 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 mit der geringsten Anzahl von Knoten - z. B. gibt es möglicherweise nur einen Bereich auf der Seite. Gehen Sie also mit einer Regel, die auf einen Bereich verweist, direkt zu diesem Knoten.

Hier sind einige Links, die meine Behauptungen stützen

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

Es klingt so, als würde dies auf diese Weise geschehen, um zu vermeiden, dass alle Kinder der Eltern (die viele sein könnten) und nicht alle Eltern eines Kindes, das eins sein muss, betrachtet werden müssen. Selbst wenn das DOM tief ist, wird beim RTL-Abgleich nur ein Knoten pro Ebene und nicht mehrere Knoten betrachtet. Ist es einfacher / schneller, CSS-Selektoren LTR oder RTL zu bewerten?

Denken Sie daran, dass ein Browser beim Selektorabgleich ein Element (dasjenige, für das er den Stil bestimmen möchte) und alle Ihre Regeln und deren Selektoren enthält und herausfinden muss, welche Regeln mit dem Element übereinstimmen. Dies unterscheidet sich beispielsweise von der üblichen jQuery-Funktion, 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, um ihn mit diesem Selektor zu vergleichen, ist von links nach rechts in einigen Fällen sinnvoller. Aber das ist definitiv nicht die Situation des Browsers. Der Browser versucht, Google Mail oder was auch immer zu rendern, und hat diejenige <span>, die er zu stylen versucht, und die über 10.000 Regeln, die Google Mail in sein Stylesheet einfügt (ich erfinde diese Zahl nicht).

Insbesondere in der Situation, in der der Browser die meisten Selektoren betrachtet, die er in Betracht zieht, 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 übereinstimmenden Fällen ein wenig zusätzliche Arbeit erfordert, gewinnen Sie trotzdem aufgrund der gesamten Arbeit, die Sie in den nicht übereinstimmenden Fällen sparen.

Wenn Sie zunächst nur den am weitesten rechts stehenden Teil des Selektors mit Ihrem Element abgleichen, stimmt er wahrscheinlich nicht überein, 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 damit beginnen, den am weitesten links liegenden Teil des Selektors abzugleichen ... gegen was passen Sie ihn an? Sie müssen das DOM durchsuchen und nach Knoten suchen, die möglicherweise zu ihm passen. Nur zu entdecken, dass es nichts gibt, das zu diesem Teil ganz links passt, kann eine Weile dauern.

Die Browser stimmen also von rechts überein. Es gibt einen offensichtlichen Ausgangspunkt und ermöglicht es Ihnen, die meisten Kandidaten-Selektoren sehr schnell loszuwerden. Sie können einige Daten unter http://groups.google.com/group/mozilla.dev.tech.layout/browse_thread/thread/b185e455a0b3562a/7db34de545c17665 sehen (obwohl die Notation verwirrend ist), aber das Ergebnis ist das insbesondere für Google Mail Vor zwei Jahren konnten Sie für 70% der (Regel-, Element-) Paare entscheiden, dass die Regel nicht übereinstimmt, nachdem Sie nur die Teile tag / class / id des Selektors ganz rechts für die Regel untersucht haben. Die entsprechende Anzahl für Mozillas Pageload-Leistungstestsuite betrug 72%. Es lohnt sich also wirklich, diese 2/3 aller Regeln so schnell wie möglich loszuwerden und sich dann nur darum zu kümmern, dass die verbleibenden 1/3 übereinstimmen.

Beachten Sie auch, dass es bereits andere Optimierungen gibt, die Browser durchführen, um zu vermeiden, dass versucht wird, Regeln abzugleichen, die definitiv nicht übereinstimmen. Wenn beispielsweise der Selektor ganz rechts eine ID hat und diese ID nicht mit der ID des Elements übereinstimmt, wird in Gecko nicht versucht, diesen Selektor mit diesem Element abzugleichen: die Menge der "Selektoren mit IDs", die versucht werden stammt aus einer Hashtabellensuche in der ID des Elements. Dies sind also 70% der Regeln, bei denen die Wahrscheinlichkeit einer Übereinstimmung ziemlich gut ist und die immer noch nicht übereinstimmen, wenn nur das Tag / die Klasse / die ID des Selektors ganz rechts berücksichtigt wird.

Das Parsen von rechts nach links, auch als Bottom-up-Parsing bezeichnet, ist für den Browser tatsächlich effizient.

Folgendes berücksichtigen:

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

Der Browser sucht zuerst nach a, dann li, dann ulund 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 mit der Verarbeitung beginnt, sobald er ein vollständiges Tag / einen vollständigen Knoten erhält, und nicht auf die gesamte Seite warten muss, außer wenn er ein Skript findet. In diesem Fall wird die Ausführung des Skripts vorübergehend angehalten und abgeschlossen geht vorwärts.

Wenn es umgekehrt ist, ist es ineffizient, da der Browser das Element gefunden hat, das er bei der ersten Prüfung gescannt hat, dann aber gezwungen war, das Dokument weiter nach allen zusätzlichen Selektoren zu durchsuchen. Dazu muss der Browser über das gesamte HTML 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 andere darin abgeglichen werden.

Es ermöglicht die Kaskadierung von spezifischer zu weniger spezifisch. Es ermöglicht auch einen Kurzschluss in der Anwendung. Wenn die spezifischere Regel in allen Aspekten gilt, für die die übergeordnete Regel gilt, werden alle übergeordneten Regeln ignoriert. Wenn das übergeordnete Element andere Bits enthält, werden diese angewendet.

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