Как CSS и DOM реализованы в браузере?
Это довольно философский вопрос. Мне интересно, как браузер реализован, как в какой структуре данных или алгоритме используется для сопоставления селектора CSS с конкретным элементом DOM. Выполняется ли это через хэш-таблицу? Как дочерний узел DOM знает, что стиль, примененный к родительскому, также применяется к себе и т. д. Я искал Mozilla developer center и ничего не нашел. Любые документы или книги по этому вопросу будут высоко оценены... спасибо!
4 ответов
соответствующие ответы на вопрос "какие селекторы соответствуют данному узлу", а не"какие узлы соответствуют селектору". Это позволяет просто оценить каждую часть селектора по текущему узлу (сравнить имя узла/идентификатор/класс). Комбинатор Decendant и наследование выполняются путем сканирования родительских узлов.
Если вам интересно, что будет дальше, блог 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. Поиск в этом каталоге для "hashtable" дает 111 результатов в 7 файлах.
Я уверен, что хэш-таблицы широко связаны с некоторыми процессами, участвующими в рендеринге стилей CSS.
Итак, короткий ответ на ваш вопрос: "Да, но это больше, чем просто хэш-таблицы."