Web Опубліковано: Теги:

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

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

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

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

Reflow та Repaint

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

Оптимізація

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

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

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

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

  1. Tenebries :

    Дякую за статтю!

Залишити відповідь

Ваша e-mail адреса не оприлюднюватиметься. Обов’язкові поля позначені *