9

Das ist eine ziemlich akademische Frage. Ich frage mich, wie der Browser implementiert wird, in welcher Datenstruktur oder mit welchem ​​Algorithmus ein CSS-Selektor auf ein bestimmtes DOM-Element abgebildet wird. Wird es durch eine Hash-Tabelle erreicht? Wie weiß der DOM-Child-Knoten, dass der auf Parent angewendete Style auch auf sich selbst usw. zutrifft? Ich habe mir Mozilla Developer Center angeschaut und nichts gefunden. Beliebige Dokumentationen oder Bücher zum Thema würden sehr geschätzt ... Danke!Wie wird CSS und DOM im Browser implementiert?

Antwort

9

Übereinstimmende Antworten Frage "welche Selektoren bestimmten Knoten entsprechen", nicht "welche Knoten einem Selektor entsprechen". Auf diese Weise können Sie einfach jeden Teil eines Selektors gegen den aktuellen Knoten auswerten (vergleichen Sie Knotenname/ID/Klasse). Der Dekombinationskombinator und die Vererbung werden durch Scannen der Elternknoten durchgeführt.

Wenn Sie interessiert sind, was Blog hatte schöne Serie nächste, WebKit passiert: WebCore rendering basics

1

Sie erwähnen Mozilla. Es ist sicherlich einfacher, Ihre Frage im Kontext einer bestimmten konkreten Implementierung zu beantworten, als die abstrakte Vorstellung aller möglichen Implementierungen.

[W] Hat eine Datenstruktur oder ein Algorithmus einen CSS-Selektor auf ein bestimmtes DOM-Element abgebildet ... wird dies durch eine Hash-Tabelle erreicht?

Ich nehme an, die direkte Antwort auf Ihre Frage, für FF2, wird wahrscheinlich in der style directory des Firefox-Quellcodes sein. Eine Suche in diesem Verzeichnis nach "hashtable" ergibt 111 Ergebnisse in 7 Dateien.

Ich bin sicher, dass Hashtabellen weitgehend mit einigen Prozessen beim Rendern von CSS-Stilen verbunden sind.

Also die kurze Antwort auf Ihre Frage ist, "Ja, aber es gibt mehr als nur Hash-Tabellen."

2

Also hier sind die knappen docs:

Aus Ihrer Frage scheint es, dass Sie zum ersten Mal mehr darüber erfahren sollte, wie CSS funktionieren soll (zB was ist Regelspezifität, berechneter Stil).

+1

Ich bin sehr bewusst, wie CSS in Bezug arbeitet zu regieren Spezifität, berechneter Stil. Ich war an den tatsächlichen Implementierungsdetails der Rendering-Engine (en) interessiert. Ihre Antwort wirft kein Licht auf diesen Aspekt. – Jlam

+0

@Jlam: Danke, dass du 3,5 Jahre später zurück gekommen bist, um mir das zu sagen! Es tut mir leid, wenn ich dich beleidigt habe, aber deine Frage hat das nicht klar gemacht und du musst CSS wirklich kennen, bevor du dich mit der Implementierung beschäftigst. FWIW, ich lernte die Grundlagen, wie Mozillas Stilsystem funktionierte, indem ich diese Seiten durchblätterte und dann durch die Implementierung, die in Ewan's Antwort verlinkt ist. – Nickolay