Как CSS и DOM реализованы в браузере?
-
11-09-2019 - |
Вопрос
Это довольно академический вопрос.Мне интересно, как реализован браузер, в какой структуре данных или алгоритме используется для сопоставления CSS-селектора с конкретным элементом DOM.Выполняется ли это с помощью хэш-таблицы?Откуда дочерний узел DOM знает, что стиль, примененный к родительскому, также применим к нему самому и т.д.Я просматривал Mozilla developer center и ничего не нашел.Мы были бы весьма признательны за любую документацию или книги по этому вопросу...Спасибо!
Решение
Совпадение отвечает на вопрос "какие селекторы соответствуют данному узлу", а не "какие узлы соответствуют селектору".Это позволяет вам просто оценивать каждую часть селектора по текущему узлу (сравнивать имя узла / идентификатор / класс).Decendant combinator и наследование выполняются путем сканирования родительских узлов.
Если вам интересно, что будет дальше, в блоге WebKit была хорошая серия: Основы рендеринга WebCore
Другие советы
Итак, вот скудные документы:
- http://www.mozilla.org/newlayout/doc/style-system.html
- https://developer.mozilla.org/en/Mozilla_Style_System
Из вашего вопроса кажется, что вам следует сначала узнать больше о том, как должен работать CSS (напримерчто такое специфичность правила, вычисляемый стиль).
Вы упомянули Mozilla.Безусловно, проще ответить на ваш вопрос в контексте конкретной реализации, а не абстрактного понятия всех возможных реализаций.
[W] структура данных или алгоритм hat используется для сопоставления CSS- селектора с определенным элементом DOM ...выполняется ли это с помощью хэш-таблицы?
Я полагаю, что прямой ответ на ваш вопрос для FF2, скорее всего, будет в каталог стилей из исходного кода firefox.Поиск в этом каталоге для "хэш-таблица" выдает 111 результатов в 7 файлах.
Я уверен, что хэш-таблицы широко связаны с некоторыми процессами, участвующими в рендеринге стилей CSS.
Итак, краткий ответ на ваш вопрос таков: "Да, но это нечто большее, чем просто хэш-таблицы".
W3C предоставляет общий подход с точки зрения определения, который я нахожу информативным: