Missed the action at this year's Chrome Dev Summit? Catch up with our playlist on YouTube. Watch now.

Создание модели DOM

Перед тем как вывести страницу на экран, браузер создает модели DOM и CSSOM. Поэтому мы должны предоставить браузеру кратчайший путь к HTML и CSS.

TL;DR

  • Байты → символы → разметка → узлы → объектная модель.
  • Браузер преобразует HTML-разметку в объектную модель документа (DOM), а CSS-разметку - в объектную модель таблицы стилей (CSSOM).
  • Модели DOM и CSSOM не зависят друг от друга.
  • Инструменты разработчика в Chrome позволяют записать и проанализировать этапы создания DOM и CSSOM.

Модель DOM

<html>
  <head>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <link href="style.css" rel="stylesheet">
    <title>Critical Path</title>
  </head>
  <body>
    <p>Hello <span>web performance</span> students!</p>
    <div><img src="awesome-photo.jpg"></div>
  </body>
</html>

Возьмем самую простую веб-станицу с текстом без форматирования и одним изображением и посмотрим, как она обрабатывается в браузере.

Создание модели DOM

  1. Преобразование. Браузер преобразует байты из HTML-файла, размещенного на диске или в сети, в символы, основываясь на приведенной в файле кодировке (например, UTF-8).
  2. Разметка. На основании стандарта W3C HTML5 браузер выделяет среди символов теги в угловых скобках, такие как , и другие. У каждого тега есть свое значение и свой набор правил.
  3. Создание объектов. С помощью HTML-тегов браузер выделяет в документе объекты с определенными свойствами.
  4. Формирование DOM. Объекты образуют древовидную структуру, повторяющую иерархию HTML-файла, в котором одни теги помещаются в другие. Так, объект p помещается под body, а объект body, в свою очередь, под html, и так далее.

Модель DOM

В результате образуется объектная модель документа (DOM), с помощью которой браузер продолжает обрабатывать страницу.

Все эти действия (преобразование байтов в символы, определение разметки, создание объектов и формирование DOM) браузер должен выполнять каждый раз при обработке HTML-разметки. Этот процесс занимает некоторое время, особенно при обработке большого количества тегов.

Отслеживание формирования DOM с помощью инструментов разработчика

Время, затрачиваемое на создание DOM, можно отслеживать с помощью функции Timeline в инструментах разработчика. На скриншоте выше видно, что для преобразования нашего HTML-кода в DOM браузеру понадобилось 5 мс. Конечно же, чем больше кода содержит страница, тем дольше длится обработка, что может вызывать проблемы - например, при создании плавной анимации. Но об этом вы узнаете из следующих разделов руководства.

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

Модель CSSOM

При формировании DOM браузер обнаружил в документе ссылку на таблицу стилей (style.css). Поскольку она необходима для визуализации страницы, браузер мгновенно отправляет на сервер запрос и получает в ответ следующий код:

body { font-size: 16px }
p { font-weight: bold }
span { color: red }
p span { display: none }
img { float: right }

Конечно, стили можно обозначать прямо в разметке. Однако поместив их в CSS-файл, мы разделяем задачи и позволяем дизайнерам работать над CSS, пока разработчики сосредоточены на HTML.

Чтобы обработать данные из CSS-файла, браузер должен выполнить те же самые действия, что и с HTML-документом:

Создание модели CSSOM

Байты из CSS-файла преобразуются в символы, символы - в теги, а теги - в объекты, которые образуют модель CSSOM:

Модель CSSOM

Почему CSSOM имеет древовидную структуру? Сначала браузер присваивает объекту правила, характерные для его родительского элемента, а затем - характерные только для него. Таким образом получается каскадный набор стилей.

Чтобы понять это правило, взгляните на схему выше. На ней видно, что любой текст, заключенный в тег span внутри тега body, будет иметь размер 16 пикселей и будет выделен красным цветом. Правило, определяющее размер шрифта, перенесено в объект span из body. При этом текст, помещенный в тег span внутри параграфа p, подчиняется другому правилу и не отображается на странице.

Обратите внимание, что схема отражает модель CSSOM не полностью. На ней представлены только правила, замещающие стили по умолчанию, которые применяются браузерами при отсутствии CSS-файла и соответствующей HTML-разметки. См. стили Internet Explorer. Именно значения по умолчанию отображаются на вкладке Computed (По умолчанию) в инструментах разработчика.

Хотите узнать, сколько времени заняла обработка CSS-файла? Воспользуйтесь инструментами разработчика: запишите события загрузки на вкладке Timeline (Временная шкала) и найдите событие под названием Recalculate Style (Перерасчет стиля). В нем отображается время создания CSSOM и обработки стилей по умолчанию.

Отслеживание формирования CSSOM с помощью инструментов разработчика

Обработка нашей незамысловатой таблицы стилей заняла 0,6 мс и коснулась 8 объектов. Но почему при создании CSSOM браузер обрабатывал объекты, содержащиеся в другой модели - DOM? Об этом и пойдет речь в следующей главе. Из нее вы узнаете о модели визуализации, которая образуется из моделей DOM и CSSOM.