Поняття критичного шляху візуалізації

34

Від автора: після того, як браузер отримує HTML відповідь від сервера, проходить безліч етапів перед відображенням пікселів на екрані. Послідовність дій, яку повинен пройти браузер для первинної відтворення сторінки називається «шлях критичного візуалізації» або CRP.

Знання CRP неймовірно корисно для розуміння того, як можна поліпшити продуктивність сайту. CRP проходить 6 етапів:

побудова дерева DOM;

побудова дерева CSSOM;

запуск JavaScript;

створення дерева візуалізації;

генерація макета;

растеризація.

Понятие пути критического рендеринга

Побудова дерева DOM

Дерево DOM (Document Object Model) – це об’єктне представлення повністю распарсеной HTML сторінки. Сайти створюються для кожного елемента/тексту на сторінці, починаючи від кореневого елемента . Вкладені елементи представляються у вигляді дочірніх сайтів, всі вузли зберігають всі атрибути елементів. Наприклад, тег a буде мати атрибут href, прив’язаний до свого сайту.

Розглянемо для прикладу цей простий документ:

Understanding the Critical Path Rendering

Understanding the Critical Path Rendering

Introduction

Lorem ipsum dolor sit amet

Copyright 2017

Код створює наступне дерево DOM:

Понятие пути критического рендеринга

Чим гарний HTML – його можна виконувати частинами. Не потрібно завантажувати весь документ, щоб почати відтворювати контент на сторінці. Однак інші ресурси, наприклад, CSS і JS можуть блокувати рендеринг.

Побудова дерева CSSOM

CSSOM (CSS Object Model) являє собою об’єктне представлення стилів DOM. Уявлення дуже схоже на DOM, тільки до вузлів додаються стилі, будь то явно прописані або неявно успадковані.

Для документа вище у нас є файл style.css з наступними стилями:

body { font-size: 18px; }
header { color: plum; }
h1 { font-size: 28px; }
main { color: firebrick; }
h2 { font-size: 20px; }
footer { display: none; }

Стилі створюють наступне дерево CSSOM:

Понятие пути критического рендеринга

CSS вважається ресурсом, блокуючим рендеринг. Тобто дерево візуалізації (див. нижче) не побудується, поки не распарсится цей ресурс. З-за своєї каскадної природи CSS можна використовувати частинами, на відміну від HTML. Стилі, оголошені в файлі нижче, можуть переписати значення і змінити попередні стилі. Якщо ми будемо використовувати стилі, оголошені зверху у файлі, не дочекавшись повного парсинга, це може призвести до того, що будуть застосовані не ті стилі. CSS повинен бути повністю распарсен перед тим, як переходити до наступного етапу.

CSS файли вважаються ресурсами, блокуючими рендеринг тільки, коли вони застосовуються до поточного пристрою. Тег приймає атрибут media, в якому можна вказати будь-який медіа запит, всередині якого будуть застосовуватися стилі. Якщо, наприклад, у нас є стилі з медіа атрибутом orientation:landscape, а ми переглядаємо сторінку в портретному режимі, то даний ресурс не буде вважатися блокуючим рендеринг.

CSS може також блокувати скрипти. JS файли повинні почекати, поки побудується CSSOM.

Запуск JavaScript

JS вважається ресурсом, блокуючим парсер. Тобто парсинг HTML документа блокується JS.

Коли парсер доходить до тег script, будь то внутрішній або зовнішній, він зупиняється і витягає код (якщо файл зовнішній) і запускає його виконання. Ось чому необхідно розміщувати скрипти в кінці документа, якщо вони посилаються на елементи.

Щоб не блокувати парсер, JS можна завантажувати асинхронно за допомогою атрибута async.

Створення дерева візуалізації

Дерево візуалізації складається з DOM і CSSOM. Це дерево є рівно те, що буде відображатися на сторінці. Це означає, що в це дерево потрапляє тільки видимий контент. Воно не буде включати, наприклад, елементи, приховані через CSS властивості display: none.

За DOM і CSSOM вище буде створено таке дерево візуалізації:

Понятие пути критического рендеринга

Генерація макета

Макет визначає розмір вьюпорта, який дає контекст для CSS-стилів, які в свою чергу залежать від макета. Будь то відсотки або одиниці vw. Розмір вьюпорта задається з допомогою мета тегу viewport в хедері документа. Якщо тег відсутня, ширина вьюпорта за замовчуванням становить 980px.

Наприклад, найпопулярніше значення вьюпорта – це щоб його розмір відповідав ширині пристрої:

Якщо користувач зайде на сторінку з пристрою з шириною, наприклад, 1000px, то розміри в цих одиницях. Половина вьюпорта буде дорівнює 500px, 10vw будуть складати 100px і т. д.

Растеризація

На фінальному етапі відтворення видимий вміст сторінки конвертується в пікселі на екрані.

Час відтворення залежить від розміру DOM і застосовуваних стилів. Деякі стилі займають більше часу, ніж інші. Наприклад, складний градієнт background-image вимагає на малювання більше часу, ніж звичайний суцільний фон.

Збираємо всі разом

В панелі розробника можна подивитися шлях критичного рендеринга в дії. У Chrome це можна зробити на вкладці Timeline (Canary і майбутньої стабільної версії Chrome ця вкладка перейменована в Performance).

Візьмемо для прикладу наш HTML з прикладу вище (з тегом script):

Understanding the Critical Path Rendering

Understanding the Critical Path Rendering

Introduction

Lorem ipsum dolor sit amet

Copyright 2017

Якщо поглянути на логи подій завантаження сторінки, ми побачимо наступну картину:

Понятие пути критического рендеринга

Send Request – посланий GET запит index.html

Parse HTML і Send Request – починаємо парсити HTML і створюємо DOM. Посилаємо GET запит style.css і main.js

Parse Stylesheet – для style.css створюється CSSOM

Evaluate Script – сканується main.js

Layout – генерується макет на основі мета тегу вьюпорт в HTML

Paint – вивід пікселів в документі

Знаючи цю інформацію, ми можемо продумати оптимізацію шляху критичного рендеринга. У наступних статтях я розповім про кілька технік.