Як відбувається рендеринг 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, наприклад).