Опубликовано: 31 марта 2014 г.
The CSSOM and DOM trees are combined into a render tree, which is then used to compute the layout of each visible element and serves as an input to the paint process that renders the pixels to screen. Optimizing each of these steps is critical to achieving optimal rendering performance.
В предыдущем разделе, посвященном построению объектной модели, мы создали деревья DOM и CSSOM на основе входных данных HTML и CSS. Однако оба объекта являются независимыми и отражают разные аспекты документа: один описывает содержимое, а другой — правила стиля, которые необходимо применить к документу. Как объединить эти два объекта и заставить браузер отображать пиксели на экране?
Краткое содержание
- Деревья DOM и CSSOM объединяются, образуя дерево рендеринга.
- Дерево рендеринга содержит только узлы, необходимые для отображения страницы.
- Функция Layout вычисляет точное положение и размер каждого объекта.
- Последний этап — отрисовка, которая принимает итоговое дерево рендеринга и выводит пиксели на экран.
Во-первых, браузер объединяет DOM и CSSOM в «дерево рендеринга», которое захватывает все видимое содержимое DOM на странице и всю информацию о стилях CSSOM для каждого узла.
Для построения дерева отрисовки браузер выполняет примерно следующие действия:
Начиная с корня DOM-дерева, пройдите по каждому видимому узлу.
- Некоторые узлы не видны (например, теги скриптов, метатеги и т. д.) и опускаются, поскольку не отображаются в результатах рендеринга.
- Some nodes are hidden using CSS and are also omitted from the render tree; for example, the span node—in the example above—is missing from the render tree because we have an explicit rule that sets the "display: none" property on it.
Для каждого видимого узла найдите соответствующие правила CSSOM и примените их.
Отображать видимые узлы с содержимым и вычисленными стилями.
The final output is a render tree that contains both the content and style information of all the visible content on the screen. With the render tree in place, we can proceed to the "layout" stage.
Up to this point we've calculated which nodes should be visible and their computed styles, but we have not calculated their exact position and size within the viewport of the device—that's the "layout" stage, also known as "reflow."
Чтобы определить точный размер и положение каждого объекта на странице, браузер начинает обход дерева отрисовки с корня. Рассмотрим следующий пример:
<!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>
Взгляните на этот пример HTML-кода, отображенный в виде веб-страницы .
The <body> of the previous example contains two nested <div> s: the first (parent) <div> sets the display size of the node to 50% of the viewport width, and the second <div> —contained by the parent—sets its width to be 50% of its parent; that is, 25% of the viewport width.
The output of the layout process is a "box model," which precisely captures the exact position and size of each element within the viewport: all of the relative measurements are converted to absolute pixels on the screen.
Finally, now that we know which nodes are visible, and their computed styles and geometry, we can pass this information to the final stage, which converts each node in the render tree to actual pixels on the screen. This step is often referred to as "painting" or "rasterizing."
This can take some time because the browser has to do quite a bit of work. However, Chrome DevTools can provide some insight into all three of the stages described previously. Examine the layout stage for our original "hello world" example:
- Событие "Layout" фиксирует процесс построения дерева рендеринга, его позиционирования и расчета размера на временной шкале.
- После завершения компоновки браузер отправляет события "Paint Setup" и "Paint", которые преобразуют дерево отрисовки в пиксели на экране.
Время, необходимое для построения дерева рендеринга, компоновки и отрисовки, варьируется в зависимости от размера документа, применяемых стилей и устройства, на котором он работает: чем больше документ, тем больше работы у браузера; чем сложнее стили, тем больше времени требуется для отрисовки (например, сплошной цвет «дешев» в отрисовке, в то время как тень «дорого» в вычислении и рендеринге).
Страница наконец-то отображается в области просмотра:
Вот краткий обзор шагов, которые выполняет браузер:
- Обработать HTML-разметку и построить DOM-дерево.
- Обработайте разметку CSS и постройте дерево CSSOM.
- Объедините DOM и CSSOM в дерево рендеринга.
- Выполните компоновку дерева рендеринга, чтобы вычислить геометрию каждого узла.
- Отобразите отдельные узлы на экране.
The demo page may seem basic, but it requires quite a bit of work on the browser's part. If either the DOM or CSSOM were modified, you would have to repeat the process in order to figure out which pixels would need to be re-rendered on the screen.
Оптимизация критического пути рендеринга — это процесс минимизации общего времени, затрачиваемого на выполнение шагов с 1 по 5 в описанной выше последовательности. Это позволяет максимально быстро отображать контент на экране и сокращать время между обновлениями экрана после первоначального рендеринга, то есть достигать более высокой частоты обновления для интерактивного контента.