Як відбувається рендеринг Web-сторінки

Сьогодні постараюсь коротко розглянути процес рендерингу сторінки в Інтернеті. Оскільки більшість Frontend-розробників не надто зацікавлені в доступності, а тим більше коренях оптимізації веб-застосунків, формуванні DOM, його особливостях та розподілу ресурсів браузера, як на мене, буде корисно трішки поговорити про це.

Етапи парсингу та обробки сторінки

Сервер отримав HTML, опрацював його та сформував DOM-дерево елементів
Сформувалось CSSOM, що формує стилі
Формується так зване Render tree, що охоплює дерево видимих елементів(наприклад, display:none в нього не попадає)
Відбувається прохід елементів та формування layout’у
Браузер відтворює опрацьоване – paint сторінки

Reflow та Repaint

При роботі зі сторінкою користувач певним чином впливає на неї: змінюється позиція елементів, розмір шрифтів тощо. Так от, якщо відбувається зміна стилів, що не впливають на положення та розміри елементів, відбувається Repaint, а коли міняється структура та розташування в DOM’і – Reflow.

Оптимізація

Так от, вочевидь, постає питання: як оптимізувати процес завантаження та формування веб-сторінки.

Ось декілька порад:

Спрощуйте свій HTML, якщо він надто деревуватий, приділяйте увагу зайвим тегам, особливо, коли проєкт складний, і в якому-небудь IE11 він уже не пливе, а скаче з 15FPS.
Те саме стосується CSS: менше анімації, зайвих правил та складних для браузера операцій, що провокують Reflow сторінки.
Оптимізуйте зображення: використовуйте зображення з оптимальними розмірами та форматами (наприклад, WebP), а також використовуйте атрибути srcset та sizes.
Для анімацій використовуйте position: absolute/fixed, чим ви зміните площину виконання.
Мінімізуйте використання сторонніх ресурсів: кожен сторонній скрипт чи стилі збільшують час завантаження.
Використовуйте WebGL та ресурси відеокарти, якщо це можливо.
Налаштуйте кешування: приділіть увагу правильному кешуванню на стороні клієнта та сервера.
Стиснення ресурсів: Використовуйте стиснення для HTML, CSS та JS (gzip, наприклад).