Як відбувається рендеринг Web-сторінки
Сьогодні постараюсь коротко розглянути процес рендерингу сторінки в Інтернеті. Оскільки більшість Frontend-розробників не надто зацікавлені в доступності, а тим більше коренях оптимізації веб-застосунків, формуванні DOM, його особливостях та розподілу ресурсів браузера, як на мене, буде корисно трішки поговорити про це.
Етапи парсингу та обробки сторінки
- Сервер отримав HTML, опрацював його та сформував DOM-дерево елементів
- Сформувалось CSSOM, що формує стилі
- Формується так зване Render tree, що охоплює дерево видимих елементів(наприклад, display:none в нього не попадає)
- Відбувається прохід елементів та формування layout’у
- Браузер відтворює опрацьоване – paint сторінки
Reflow та Repaint
При роботі зі сторінкою користувач певним чином впливає на неї: змінюється позиція елементів, розмір шрифтів тощо. Так от, якщо відбувається зміна стилів, що не впливають на положення та розміри елементів, відбувається Repaint, а коли міняється структура та розташування в DOM’і – Reflow.
Оптимізація
Так от, вочевидь, постає питання: як оптимізувати процес завантаження та формування веб-сторінки.
Ось декілька порад:
- Спрощуйте свій хтмл, якщо він надто деревовидний, приділяйте увагу зайвим тегам, особливо, коли проект скадний, і в якому-небудь IE11 він уже не пливе, а скаче з 15FPS.
- Те саме стосується CSS: менше анімації, зайвих правил та складних для браузера операцій, що провокують Reflow сторінки.
- Для анімацій використовуйте position: absolute/fixed, чим ви зміните площину виконання.
- Використовуйте WebGL та ресурси відеокарти, якщо це можливо.