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

Создание модели визуализации и макета, вывод страницы на экран

DOM и CSSOM образуют модель визуализации. С ее помощью браузер формирует из всех видимых объектов макет, а затем выводит пиксели на экран. Чтобы ускорить загрузку страницы, нужно оптимизировать каждый из этих этапов.

В предыдущей главе мы узнали о том, как на основании HTML- и CSS-файлов строятся модели DOM и CSSOM. Эти независимые друг от друга модели отвечают за разные аспекты страницы: DOM описывает контент, а CSSOM - стили, которые будут к нему применены. Рассмотрим, как браузер объединяет эти модели и выводит страницу на экран.

TL;DR

  • Браузер объединяет DOM и CSSOM, формируя модель визуализации.
  • Модель визуализации содержит только те объекты, которые нужны для вывода страницы на экран.
  • Далее формируется макет, отражающий расположение и размер каждого объекта.
  • Наконец, объекты выводятся на экран.

Для начала браузер формирует модель визуализации, в которой всем видимым объектам из модели DOM присваиваются наборы стилей из модели CSSOM.

Объединение DOM и CSSOM в модель визуализации

Для формирования модели визуализации браузер выполняет следующие действия:

  1. Начиная с основания модели DOM, находит все видимые объекты.
  2. Этот этап не затрагивает элементы, которые не будут видны на странице, например теги скриптов, метатеги и т. п.
  3. Он также не затрагивает объекты, помеченные как невидимые с помощью CSS. Взгляните на приведенную выше схему: объект span отсутствует в модели визуализации, потому что ему присвоен параметр display: none.
  4. Находит в CSSOM наборы стилей и присваивает их соответствующим объектам.
  5. Формирует модель из видимых объектов, их содержания и стилей.

Создав модель визуализации, браузер на шаг приблизился к выводу страницы на экран! Теперь можно приступить к формированию макета.

Браузер уже определил, какие объекты будут видны на странице и какие стили нужно им присвоить. Пришло время создать макет, т. е. выяснить, какого размера будут объекты и как их нужно расположить в области просмотра.

Для этого браузер вычисляет геометрическую форму объектов, анализируя модель визуализации с самого начала. Рассмотрим простой пример:

<html>
  <head>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>Critial Path: Hello world!</title>
  </head>
  <body>
    <div style="width: 50%">
      <div style="width: 50%">Hello world!</div>
    </div>
  </body>
</html>

В теле этой страницы есть два блока div. Ширина родительского блока - 50% от области просмотра, а вложенного - 50% от родительского, т. е. 25% экрана.

Определение размера элементов в макете

Сформировав макет, браузер получает блочную модель, точно отражающую расположение и размер каждого объекта в области просмотра. Все относительные показатели преобразуются в абсолютное положение пикселей на экране.

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

Как вы наверняка заметили, браузеру нужно выполнить множество действий, на которые зачастую уходит немало времени. Чтобы оптимизировать время загрузки, продолжительность каждого этапа можно отслеживать с помощью инструментов разработчика в Chrome. Рассмотрим этап формирования макета на нашем первом примере Hello World:

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

  • Событие Layout на вкладке Timeline отражает время, затраченное на формирование макета, а также на определение положения и размера объектов.
  • Сформировав макет, браузер переходит к этапам Paint Setup и Paint для преобразования модели визуализации в пиксели.

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

Тем временем, визуализация завершилась, и наша страница появилась в области просмотра!

Страница Hello World, выведенная на экран

Давайте вспомним, какие действия выполнил браузер:

  1. Обработка HTML-разметки и создание модели DOM.
  2. Обработка CSS-файла и создание модели CSSOM.
  3. Создание модели визуализации из DOM и CSSOM.
  4. Определение формы и расположения объектов, создание макета.
  5. Вывод объектов на экран.

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

Чтобы оптимизировать процесс визуализации, нужно уменьшить время, затрачиваемое на выполнение пяти действий из списка выше. В результате контент будет выводиться на экран быстрее, время обновления сократится, а вместе с этим возрастет частота обновления интерактивного контента.