Руководство для начинающих по объектной модели CSS (CSSOM)
Многое происходит между первый HTTP-запрос и конечная доставка веб-страницы. Передача данных и конвейер рендеринга в браузере требуют множества различных технологий, одной из которых является CSS объектная модель, или CSSOM.
Объектная модель CSS берет код CSS и отображает каждый селектор в древовидную структуру для облегчения разбора. Возможно, разработчикам не важно полностью понимать эту концепцию, но это ценная тема для изучения, если вы хотите узнать больше о как браузеры отображают код на работающем веб-сайте.
В этой статье я расскажу об основах объектной модели CSS и покажу, как она работает..
Что такое CSSOM?
Термин объектная модель CSS описывает карта всех CSS-селекторов и соответствующих свойств для каждого селектора. Эти стили могут быть корневыми элементами или иметь вложенные дочерние элементы..
CSSOM очень похож на ДОМ в HTML, который обозначает объектную модель документа. Оба они являются частью критический путь рендеринга который представляет собой серию шагов, которые должны произойти с правильно сделать сайт. Все эти процессы происходят автоматически, за кулисами.
Так почему же CSSOM важен? Это карта, используемая браузером для правильно отображать стили CSS на веб-странице. Нет простого способа сказать компьютеру, что все параграфы в .основное содержание div должен иметь дополнительную высоту строки.
Решением является объектная модель CSS, которая отображает все элементы и свойства из вашего кода CSS.
CSSOM облегчает браузеру отображать стили на странице. Все это очень технично, но стоит немного разобраться в процессе, особенно если вы создаете сайты.
Как это устроено
DOM и CSSOM являются широко используется всеми веб-браузерами интерпретировать и отображать веб-страницы. Приведенная ниже диаграмма взята из руководства по веб-основам для разработчиков Google и объясняет, как DOM отображается в веб-браузере.
В DOM и CSSOM вся информация конвертируется из байтов в цифровые карты которые визуализируют каждый элемент в веб-документе. Процесс работает следующим образом:
- Браузер загружает HTML для веб-страницы.
- При обработке HTML анализатор может столкнуться с элементом ссылки ссылка на внешнюю таблицу стилей.
- Эта таблица стилей CSS разобрать в карту используя спецификации объектной модели CSS.
- Полученный код может быть применяется к элементам в DOM.
Все это происходит очень быстро, и происходит с каждым запросом страницы. Эта другая диаграмма ниже демонстрирует Пример древовидной структуры CSSOM.
Обратите внимание, что некоторые свойства на диаграмме имеют светло-серый цвет шрифта. Эти свойства наследуется от родителя. Поскольку тело имеет определенный размер шрифта, все элементы в теле также получают этот размер шрифта, если он не переопределен.
HTML и CSS строки конвертируется в токены которые могут быть понимается как узлы браузером. Эти узлы похожи объекты в древовидной структуре это определяет, как должна быть построена вся страница.
CSSOM и DOM полностью отдельные модели данных, поэтому они разбираются отдельно друг от друга. Но они оба имеют похожие древовидные структуры, и оба служат одной и той же цели: дают браузеру структуру для визуализации и идентификации различных элементов на странице..
Почему веб-разработчики должны заботиться
Так как все рендеринга происходит на бэкэнде, вам действительно не нужно сильно беспокоиться о дереве CSSOM. Но может быть полезно понять, как это работает.
Следует помнить, что CSSOM должен быть полностью загружен перед отображением веб-страницы, так как она будет определять, как должен выглядеть каждый элемент на странице. Если страница загружается до CSSOM, она сначала будет отображаться в виде обычного HTML, а через несколько секунд - стили..
Браузеры специально избегают этого, потому что это может сбить с толку конечных пользователей. И стоит отметить, что CSSOM не может быть кэширован; Это должно быть воссоздан на каждой странице.
Актуальные CSS-файлы можно кэшировать, чтобы быстрее загружать ресурсы, но отображать страницу в браузере. всегда требует запуска парсера CSSOM. Это также означает, что JavaScript может оказать негативное влияние на рендеринг и производительность.
Я настоятельно рекомендую прочитать эту статью, чтобы узнать больше о внешних ресурсах CSS / JS и времени их загрузки..
Лучший способ оптимизировать ваш сайт - создать природный каскад ресурсов, которые загружаются в тандеме.
Можно манипулировать CSSOM с помощью JavaScript, потому что это технически JS API. Но это не имеет большого значения по сравнению с манипулированием DOM в JavaScript.
Основная причина узнать о CSSOM заключается в дальнейшем обучении тому, как на самом деле работают веб-сайты..
Есть много вещей, которые мы считаем само собой разумеющимся, которые обеспечивают бесперебойную работу Интернета. Когда вы немного больше понимаете весь процесс, вы можете визуализировать, как все это происходит вместе, и, надеюсь, получить некоторое признание за существование Всемирной паутины.
Дальнейшее чтение
Я надеюсь, что это введение может дать вам четкое представление о том, что такое объектная модель CSS и как она влияет на веб-страницы. Там не так много манипулировать в CSSOM, так что он немного отличается от DOM.
Однако это все еще критически важная технология в веб-разработке, и она должна прояснить основные аспекты рендеринга в браузерах..
Есть много других ресурсов, обсуждающих CSSOM и как это работает. Если вы хотите узнать больше, вот несколько постов, которые я рекомендую:
- Обзор объектной модели CSS
- Изучение CSSOM: создание анализатора CSS-объектов
- Что должен знать каждый веб-разработчик о рендеринге веб-страниц
