❗ Вебсайт в стадии бета-тестирования. Возможны ошибки.
Справочники
Архитектура
Модель CSSOM

Объектная модель стиля вебстраницы

Совет

Прежде чем рассматривать модель стилей CSSOM, прочтите о модели вебстраницы DOM. Эти две модели совместно участвуют в создании модели представления вебстраницы.

Процесс построения объектной модели

Рассмотрим подробно процесс построения браузером пользователя объектной модели стиля вебстраницы.

1. Получить поток байтов

  1. Пользователь в адресной строке браузера или в гиперссылке запрашивает вебстраницу.
  2. Браузер запрашивает вебсервер, на котором расположены необходимые файлы. На запрос браузера вебсервер возвращает поток байтов.

2. Преобразовать байты в символы

  1. Браузер в соответствии с кодировкой UTF-8 преобразует поток байтов в строки символов Юникода.

3. Преобразовать символы в токены

  1. Браузер использует правила спецификации HTML и идентифицирует в строках символов токены.
  2. Список стилей обычно расположен в отдельных файлах, независимо от файлов с описанием узлов (HTML). Расположение файла стилей указано в метаданных вебстраницы в виде тега:
	<link href="style.css" rel="stylesheet" />
  1. Браузер запрашивает у вебсервера файлы стиля и получает поток байтов.

4. Преобразовать токены в объекты

  1. Браузер преобразует токены узлов в объекты гипертекста.
  2. Браузер использует правила спецификаций CSS и в токенах узлов идентифицирует селекторы CSS.

5. Построить объектную модель

  1. Браузер использует правила спецификации DOM и структурирует объекты в модель вебстраницы. HTML разметка помогает установить связи между узлами.
  2. Браузер использует правила спецификации CSSOM и строит объектную модель стилей (свойств) узлов.

Результатом процесса служит объектная модель стилей вебстраницы (CSSOM).

Построение объектной модели стиля требует времени. Но ещё больше времени браузер тратит на рекурсивный расчёт значений селекторов. Чем сложнее структура модели, тем больше времени необходимо браузеру для правильного вычисления унаследованных значений свойств узлов.

Вывод: чем проще структура стилей, тем меньше ошибок и тем быстрее браузер отобразит вебстраницу.

Объектная модель стиля вебстраницы

Процесс создания объектной модели стиля вебстраницы

Модель DOMГиперссылка