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

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

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

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

Reflow та Repaint

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

Оптимізація

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

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

• Спрощуйте свій хтмл, якщо він надто деревовидний, приділяйте увагу зайвим тегам, особливо, коли проект скадний, і в якому-небудь IE11 він уже не пливе, а скаче з 15FPS.
• Те саме стосується CSS: менше анімації, зайвих правил та складних для браузера операцій, що провокують Reflow сторінки.
• Для анімацій використовуйте position: absolute/fixed, чим ви зміните площину виконання.
• Використовуйте WebGL та ресурси відеокарти, якщо це можливо.