Руководство для начинающих по объектной модели CSS (CSSOM)

Многое происходит между первым HTTP-запросом и окончательной доставкой веб-страницы. Передача данных и конвейер рендеринга в браузере требуют множества различных технологий, одной из которых является CSS объектная модельили CSSOM.

Объектная модель CSS берет код CSS и отображает каждый селектор в древовидную структуру для более простого анализа. Возможно, разработчикам не важно полностью понимать эту концепцию, но это ценная тема для изучения, если вы хотите узнать больше о том, как браузеры отображают код на работающем веб-сайте.

В этой статье я расскажу об основах объектной модели CSS и покажу, как она работает.

Программы для Windows, мобильные приложения, игры - ВСЁ БЕСПЛАТНО, в нашем закрытом телеграмм канале - Подписывайтесь:)

Читайте также: Просмотр уровня приоритета стиля CSS

Что такое CSSOM?
Термин «Объектная модель CSS» описывает карту всех селекторов CSS и соответствующих свойств для каждого селектора. Эти стили могут быть корневыми элементами или иметь вложенные дочерние элементы.

CSSOM очень похож на DOM в HTML, что означает Document Object Model. Оба они являются частью критический путь рендеринга Это последовательность шагов, которые должны произойти для правильной визуализации сайта. Все эти процессы происходят автоматически, за кадром.

Так почему же CSSOM важен? Это карта, используемая браузером для правильного отображения стилей CSS на веб-странице. Нет простого способа сообщить компьютеру, что все абзацы в div .main-content должны иметь дополнительную высоту строки.

Решением является объектная модель CSS, которая отображает все элементы и свойства из вашего кода CSS.

CSSOM облегчает браузеру отображение стилей на странице. Все это очень технически, но стоит немного разобраться в процессе, особенно если вы создаете сайты.
Как это работает
И DOM, и CSSOM широко используются всеми веб-браузерами для интерпретации и визуализации веб-страниц. Диаграмма ниже от Руководство по веб-основам для разработчиков Googleи объясняет, как DOM отображается в веб-браузере.
ИЗОБРАЖЕНИЕ: Разработчики GoogleВ DOM и CSSOM вся информация преобразуется из байтов в цифровые карты, которые отображают каждый элемент в веб-документе. Процесс работает следующим образом:

Браузер загружает HTML-код для веб-страницы.
При обработке HTML анализатор может столкнуться с элементом ссылки, ссылающимся на внешнюю таблицу стилей.
Эта таблица стилей CSS затем анализируется на карте с помощью Характеристики объектной модели CSS,
Полученный код можно затем применить к элементам в DOM.

Все это происходит очень быстро и происходит с каждым запросом страницы. Эта другая диаграмма ниже демонстрирует пример древовидной структуры CSSOM.
ИЗОБРАЖЕНИЕ: Разработчики GoogleОбратите внимание, что некоторые свойства на диаграмме имеют светло-серый цвет шрифта. Эти свойства унаследованный от родителя. Поскольку тело имеет определенный размер шрифта, все элементы в теле также получают этот размер шрифта, если он не переопределен.

Строки HTML и CSS преобразуются в токены, которые затем могут восприниматься браузером как узлы. Эти узлы похожи на объекты в древовидной структуре, которая определяет, как должна быть построена вся страница.

CSSOM и DOM – это совершенно разные модели данных, поэтому они анализируются отдельно друг от друга. Но они оба имеют схожие древовидные структуры и служат одной и той же цели: дают браузеру структуру для визуализации и идентификации различных элементов на странице.
Почему веб-разработчики должны заботиться
Поскольку весь рендеринг происходит на бэкэнде, вам не нужно сильно беспокоиться о дереве CSSOM. Но может быть полезно понять, как это работает.

Следует помнить, что CSSOM должен быть полностью загружен перед отображением веб-страницы, так как он будет определять, как должен выглядеть каждый элемент на странице. Если страница загружается до CSSOM, она сначала будет отображаться в виде обычного HTML, а через несколько секунд – стили.

Браузеры специально избегают этого, потому что это может сбить с толку конечных пользователей. И стоит отметить, что CSSOM не может быть кэширован; он должен быть воссоздан на каждой странице.

Актуальные CSS-файлы можно кэшировать для более быстрой загрузки ресурсов, но для рендеринга страницы в браузере всегда требуется запуск анализатора CSSOM. Это также означает, что JavaScript может оказать негативное влияние на рендеринг и производительность.

Я очень рекомендую читая эту статью узнать больше о внешних ресурсах CSS / JS и времени их загрузки.

Лучший способ оптимизировать ваш сайт – создать естественный каскад ресурсов, которые загружаются в тандеме.

Можно манипулировать CSSOM с помощью JavaScript, потому что это технически JS API, Но это не служит большой цели по сравнению с JavaScript DOM манипулирование,

Основная причина узнать о CSSOM состоит в том, чтобы больше узнать о том, как на самом деле работают веб-сайты.

Есть много вещей, которые мы считаем само собой разумеющимся, которые обеспечивают бесперебойную работу Интернета. Когда вы немного больше поймете весь процесс, вы сможете визуализировать, как все это происходит вместе, и, надеюсь, получить некоторое признание за существование Всемирной паутины.
Дальнейшее чтение
Я надеюсь, что это вступление может дать вам четкое представление о том, что такое объектная модель CSS и как она влияет на веб-страницы. В CSSOM манипулировать не нужно, поэтому он немного отличается от DOM.

Однако это все еще критически важная технология в веб-разработке, и она должна прояснить основные аспекты рендеринга в браузере.

Есть много других ресурсов, обсуждающих CSSOM и как это работает. Если вы хотите узнать больше, вот несколько постов, которые я рекомендую: