Розуміння процесу візуалізації

Браузеру належить пройти багато кроків, перш ніж HTML відповідь від сервера буде перетворений в пікселі на екрані. Послідовність цих кроків, необхідна для першого відображення сторінки, називається «Процес візуалізації» (ориг. Critical Rendering Path).

Знання про CRP (Critical Rendering Path) неймовірно корисно для розуміння того, як поліпшити продуктивність сайту.
Існує 6 етапів CRP:
  • побудова DOM-дерева
  • побудова CSSOM-дерева
  • запуск JavaScript
  • створення Render-дерева
  • генерація розкладки
  • отрисовка
CRP чергу
Побудова DOM-дерева
DOM (об'єктна модель документа) дерево це об'єкт, що представляє повністю розібрану HTML-сторінку. Починаючи з кореневого елемента
<html>
, вузли створюються для кожного елемента/тексту на сторінці. Елементи, що вкладені в інші елементи, представлені у вигляді дочірніх вузлів, і кожен вузол містить повний набір атрибутів для цього елемента. Наприклад, елемент
<a>
буде мати атрибут
href
, пов'язаний з вузлом.
Візьмемо для прикладу такий документ:
<html> 
<head> 
<title>Understanding the Critical Rendering Path</title>
<link rel="stylesheet" href="style.css">
</head> 
<body> 
<header>
<h1>Understanding the Critical Rendering Path</h1>
</header>
<main>
<h2>Introduction</h2>
<p>Lorem ipsum dolor sit amet</p>
</main>
<footer>
<small>Copyright 2017</small>
</footer>
</body> 
</html> 

З нього буде побудовано таке DOM-дерево:
DOM-дерево
Хороша новина, стосовно HTML, полягає в тому, що він може бути виконаний по частинах. Документ не повинен бути завантажений повністю для того, щоб контент почав з'являтися на сторінці. Однак, інші ресурси, як CSS і JavaScript, можуть блокувати рендеринг сторінок.
Побудова CSSOM-дерева
CSSOM (об'єктна модель CSS) це об'єкт, що представляє стилі, пов'язані з 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-дерево:
CSSOM-дерево
CSS вважається «блокуючим обробку ресурсом». Це означає, що Render-дерево (див. нижче) не може бути побудована без повного початкового розбору CSS.
На відміну від HTML, CSS не може бути використаний по частинах в силу своєї каскадної природи. Стилі, описані в документі нижче, можуть змінити і змінювати стилі, визначені раніше. Так що якщо ми почнемо використовувати CSS-стилі до того, як буде розібрана таблиця стилів, ми можемо зіткнутися з ситуацією, коли стилі будуть застосовуватися невірно. Це означає, що для переходу до наступного кроку, необхідно повністю розібрати CSS.
CSS-файли блокують рендер тільки якщо вони застосовуються.
<link rel="stylesheet">
може приймати медіа-атрибут, в якому ми можемо вказати будь медиавыражение, до якого будуть ставитися вкладені всередину стилі. Якщо, наприклад, ми маємо таблицю стилів з медіа-атрибутів
orientation:landscape
, а ми переглядаємо сторінку в портретному режимі, то цей ресурс не буде вважатися блокуючим обробку.
CSS також може бути «блокуючим скрипти», тому що JavaScript-файли повинні дочекатися побудови CSSOM, перш ніж почати виконуватися.
Запуск JavaScript
JavaScript є блокуючим ресурсом для парсера. Це означає, що JavaScript блокує розбір самого HTML-документа.
Коли парсер доходить до тега
<script>
(не важливо внутрішній або зовнішній), він зупиняється, забирає файл(якщо він зовнішній) і запускає його. Ось чому, якщо ми маємо JavaScript-файл, який посилається на елементи документа, він обов'язково повинен бути поміщений після їх появи.
JavaScript можна завантажувати асинхронно, вказавши атрибут
async
, для того, щоб уникнути блокування парсера.
<script async src="script.js"> 

Створення Render-дерева
Render-дерево це сукупність DOM і CSSOM. Це дерево, яке дає уявлення того, що в кінцевому результаті відобразиться на сторінці. Це означає, що воно захоплює тільки видимий контент і не включає, наприклад, елементи, які були приховані за допомогою CSS-правила
display: none
.
На прикладах DOM і CSSOM, представлених вище, буде побудовано таке Render-дерево:
Render-дерево
Генерація розкладки
Розкладка це те, що визначає розмір видимої області документа(viewport), яка забезпечує контекст для стилів CSS, залежних від нього, наприклад відсотки або одиниці вьюпорта.
Розмір вьюпорта визначається метатэгом, що знаходиться в
<head>
документа або, якщо тег не представлений, буде використано стандартне значення вьюпорта шириною 980 пікселів.
Наприклад, найбільш частим значенням для цього метатэга є розмір, відповідний з шириною пристрою.
<meta name="viewport" content="width=device-width,initial-scale=1">

Якщо користувач відвідує веб-сторінку з пристрою, ширина якого, наприклад 1000 пікселів, то розміри будуть спиратися на це значення. Половина видимій області буде дорівнює 500 пікселів, 10 відсотків — 100 пікселів, і так далі.
Отрисовка
Нарешті, на кроці відтворення, видимий вміст сторінки може бути перетворений в пікселі, щоб з'явитися на екрані.
Час, який займе цей етап, залежить як від величини DOM, так і від того, які стилі застосовуються. Деякі стилі вимагають більше зусиль, щоб бути застосованими, ніж інші. Наприклад, складне градієнтне фонове зображення вимагатиме більше часу, ніж простий суцільний колір на тлі.
Збираємо всі разом
Щоб побачити процес візуалізації в процес, ми можемо перевірити інструменти розробника. У Chrome, це на вкладці тимчасова шкала
Щоб побачити процес візуалізації, ми можемо скористатися інструментами розробника. У Chrome це можна зробити у вкладці «Timeline» (Canary, а так само скоро в стабільних версія Chrome, вкладка перейменована в «Performance»).
Візьмемо для прикладу наш HTML-зразок, згаданий вище (з доданим тегом
<script>
).
<html> 
<head> 
<title>Understanding the Critical Rendering Path</title>
<link rel="stylesheet" href="style.css">
</head> 
<body> 
<header>
<h1>Understanding the Critical Rendering Path</h1>
</header>
<main>
<h2>Introduction</h2>
<p>Lorem ipsum dolor sit amet</p>
</main>
<footer>
<small>Copyright 2017</small>
</footer>
<script src="main.js"></script>
</body> 
</html> 

Якщо ми подивимося в Event Log для цієї сторінки, то побачимо наступне:
Результат Event Log
  1. Send Request — GET-запит, відправлений для index.html
  2. Parse HTML and Send Request — почати розбір HTML і побудова DOM. Відправити GET запит style.css і main.js
  3. Parse Stylesheet — CSSOM, створений для style.css
  4. Evaluate Script — оцінка main.js
  5. Layout — генерація розкладки, заснованої на значенні метатега viewport
  6. Paint — вивід пікселів в документі
Спираючись на цю інформацію, ми можемо приймати рішення, спрямовані на оптимізацію процесу візуалізації. Я розповім про деяких таких техніках в подальших публікаціях.
Джерело: Хабрахабр

0 коментарів

Тільки зареєстровані та авторизовані користувачі можуть залишати коментарі.