Как CSS и DOM реализованы в браузере?

Question

Это довольно академический вопрос. Мне интересно, как реализован браузер и какая структура данных или алгоритм используются для сопоставления селектора CSS с конкретным элементом DOM. Это достигается через хеш-таблицу? Как дочерний узел DOM знает, что стиль, примененный к родительскому узлу, применим и к самому себе и т. Д. Я просматривал центр разработчиков Mozilla и ничего не нашел. Любая документация или книги по этому вопросу будут высоко оценены ... спасибо!

Answer 1

Соответствует ответу на вопрос «какие селекторы соответствуют данному узлу», а не «какие узлы соответствуют селектору». Это позволяет просто сравнивать каждую часть селектора с текущим узлом (сравнивать имя узла / идентификатор / класс). Комбинатор и наследование потомков выполняются путем сканирования родительских узлов.

Если вам интересно, что будет дальше, в блоге WebKit была хорошая серия: Основы рендеринга WebCore

Answer 2

Итак, вот скудные документы:

• http://www.mozilla.org/newlayout/doc/style-system.html
• https://developer.mozilla.org/en/Mozilla_Style_System

Из вашего вопроса кажется, что сначала вам нужно больше узнать о том, как должен работать CSS (например, что такое специфичность правил, вычисляемый стиль).

Answer 3

W3C предоставляет общий подход с точки зрения определения, который я считаю информативным:

• Присвоение значений свойств
• селекторы
• и т.д.

Answer 4

Вы упомянули Мозиллу. Конечно, легче ответить на ваш вопрос в контексте конкретной конкретной реализации, чем абстрактное понятие всех возможных реализаций.

[W] Если структура данных или алгоритм используются для отображения селектора CSS на конкретный элемент DOM ... это выполняется с помощью хеш-таблицы?

Полагаю, что прямой ответ на ваш вопрос для FF2, скорее всего, находится в каталоге style исходного кода firefox. Поиск в этом каталоге для "hashtable" дает 111 результатов в 7 файлах.

Я уверен, что хеш-таблицы широко связаны с некоторыми процессами, используемыми при рендеринге стилей CSS.

Итак, краткий ответ на ваш вопрос: «Да, но это больше, чем просто хеш-таблицы».