CSS-Auswahl-Engines: Lesen von rechts nach links
In der Welt von CSS wurde allgemein angenommen, dass Selektoren wie .name ist schneller als div.name. Einige neuere Erkenntnisse behaupten jedoch etwas anderes und deuten darauf hin, dass die meisten Selektor-Engines von rechts nach links lesen. Dies wirft Fragen zu den Auswirkungen auf die Leistung und den Überlegungen hinter diesem Ansatz auf.
Rechts-nach-Links-Auswertung
Während es wahr ist, dass die Annahme, dass .name schneller ist, möglicherweise stimmt fehlerhaft sein, hängt die Gesamtleistung stark von der Browserimplementierung und der spezifischen Dokumentstruktur ab. Dennoch verfolgen die meisten modernen CSS-Selektor-Engines einen Bewertungsansatz von rechts nach links.
Laut Boris Zbarsky, dem Entwickler von Gecko, wählen Browser normalerweise ein Element aus und bewerten alle Kandidatenselektoren, um festzustellen, ob es übereinstimmt , anstatt passende Elemente für einen bestimmten Selektor zu identifizieren. Dieser Rechts-nach-Links-Ansatz vereinfacht das Durchlaufen von Kombinatoren wie > oder , innerhalb von Selektoren.
Durchquerung innerhalb einfacher Selektoren
Es ist jedoch wichtig zu unterscheiden, dass sich die Rechts-nach-Links-Auswertung nicht bis auf die einfache Selektorebene innerhalb erstreckt Jeder zusammengesetzte Selektor. Beispielsweise prüft der Browser im komplexen Selektor div.name[data-foo="bar"]:nth-child(5):hover::after die Bedingungen möglicherweise nicht unbedingt in der folgenden Reihenfolge: Hover, Anzahl untergeordneter Elemente, Daten Attribut, Namensklasse und Typ.
Stattdessen können bestimmte einfache Selektoren, wie z. B. IDs, aus Leistungsgründen priorisiert werden. Dies wird in der Implementierung von Gecko deutlich, wo Regeln mit IDs zuerst überprüft werden, um den Abgleichsprozess zu optimieren.
Zusammenfassung
Die Leserichtung der CSS-Auswahl-Engine ist im Allgemeinen richtig. nach links, aber die spezifischen Details, wie dies implementiert wird, können je nach Browser variieren. Darüber hinaus gilt die Rechts-nach-Links-Auswertung nur für Kombinatoren innerhalb zusammengesetzter Selektoren und nicht bis auf die Ebene einzelner einfacher Selektoren.
Das obige ist der detaillierte Inhalt vonBegünstigen CSS-Auswahl-Engines das Lesen von rechts nach links?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!