Построение, макет и покраска дерева рендеринга

Илья Григорик

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

В предыдущем разделе, посвященном построению объектной модели, мы построили деревья DOM и CSSOM на основе входных данных HTML и CSS. Однако оба они являются независимыми объектами, которые фиксируют различные аспекты документа: один описывает содержимое, а другой описывает правила стиля, которые необходимо применить к документу. Как нам объединить их и заставить браузер отображать пиксели на экране?

Краткое содержание

  • Деревья DOM и CSSOM объединяются, образуя дерево рендеринга.
  • Дерево рендеринга содержит только узлы, необходимые для рендеринга страницы.
  • Layout вычисляет точное положение и размер каждого объекта.
  • Последний шаг — рисование, которое принимает окончательное дерево рендеринга и отображает пиксели на экране.

Во-первых, браузер объединяет DOM и CSSOM в «дерево рендеринга», которое фиксирует весь видимый контент DOM на странице и всю информацию о стиле CSSOM для каждого узла.

DOM и CSSOM объединяются для создания дерева рендеринга.

Чтобы построить дерево рендеринга, браузер выполняет примерно следующее:

  1. Начиная с корня дерева DOM, пройдите через каждый видимый узел.

    • Некоторые узлы невидимы (например, теги скриптов, метатеги и т. д.) и опускаются, поскольку они не отражаются в отображаемых выходных данных.
    • Некоторые узлы скрыты с помощью CSS, а также исключены из дерева рендеринга; например, узел диапазона — в приведенном выше примере — отсутствует в дереве рендеринга, поскольку у нас есть явное правило, которое устанавливает для него свойство «display: none».

  2. Для каждого видимого узла найдите соответствующие правила CSSOM и примените их.

  3. Создавать видимые узлы с содержимым и их вычисленными стилями.

Конечным результатом является дерево рендеринга, содержащее как содержимое, так и информацию о стиле всего видимого содержимого на экране. Имея дерево рендеринга, мы можем перейти к этапу «макета».

До этого момента мы рассчитали, какие узлы должны быть видимыми, и вычислили их стили, но мы не рассчитали их точное положение и размер в области просмотра устройства — это этап «макета», также известный как «перекомпоновка». "

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

<!DOCTYPE html>
<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: первый (родительский) div устанавливает размер отображения узла на 50% ширины области просмотра, а второй div, содержащийся в родительском элементе, устанавливает его ширину на быть 50% своего родителя; то есть 25% ширины области просмотра.

Расчет информации о макете

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

Наконец, теперь, когда мы знаем, какие узлы видимы, а также их вычисленные стили и геометрию, мы можем передать эту информацию на заключительный этап, который преобразует каждый узел в дереве рендеринга в реальные пиксели на экране. Этот шаг часто называют «рисованием» или «растрированием».

Это может занять некоторое время, поскольку браузеру приходится выполнять немало работы. Однако Chrome DevTools может дать некоторое представление обо всех трех этапах, описанных выше. Давайте рассмотрим этап макета для нашего исходного примера «привет, мир»:

Измерительный макет в DevTools

  • Событие «Макет» фиксирует построение дерева рендеринга, расчет положения и размера на временной шкале.
  • Когда макет завершен, браузер выдает события «Paint Setup» и «Paint», которые преобразуют дерево рендеринга в пиксели на экране.

Время, необходимое для построения дерева рендеринга, макета и рисования, зависит от размера документа, примененных стилей и устройства, на котором он работает: чем больше документ, тем больше работы приходится браузеру; чем сложнее стили, тем больше времени уходит на рисование (например, сплошной цвет «дешево» рисовать, а падающую тень «дорого» вычислять и визуализировать).

Страница наконец-то видна в области просмотра:

Отрисованная страница Hello World

Вот краткий обзор шагов браузера:

  1. Обработайте HTML-разметку и постройте дерево DOM.
  2. Обработайте разметку CSS и постройте дерево CSSOM.
  3. Объедините DOM и CSSOM в дерево рендеринга.
  4. Запустите макет в дереве рендеринга, чтобы вычислить геометрию каждого узла.
  5. Нарисуйте отдельные узлы на экране.

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

Оптимизация критического пути рендеринга — это процесс минимизации общего количества времени, затрачиваемого на выполнение шагов с 1 по 5 в приведенной выше последовательности. При этом контент отображается на экране максимально быстро, а также сокращается время между обновлениями экрана после первоначального рендеринга; то есть добиться более высокой частоты обновления интерактивного контента.

Обратная связь