Skip to main content

Що означає «оптимізація рендерингу»?

Frontend-інструментиJunior~1 хв читання
Запропонувати правку

Оптимізація рендерингу - це процес пришвидшення і спрощення того, як браузер відображає сторінку на екрані.

Що відбувається після завантаження HTML

Щоб зрозуміти, про що йдеться, потрібно знати, що відбувається після завантаження HTML:

  1. Парситься HTML → будується DOM
  2. Парситься CSS → створюється CSSOM
  3. Об'єднуються DOM + CSSOM → рендер-дерево
  4. Layout (reflow) - обчислюються позиції та розміри
  5. Paint - елементи відмальовуються
  6. Composite - все збирається у фінальний кадр на екрані

Що означає оптимізація рендерингу

  • скоротити кількість і складність цих етапів
  • уникати зайвих перерахунків (layout thrashing)
  • не змушувати браузер перемальовувати все заново без причини
  • скоротити навантаження на основний потік

Приклади того, що гальмує рендеринг

  • часті DOM-операції або inline-стилі через JavaScript
  • анімації, які не працюють через transform або opacity
  • великі зображення без розмірів у CSS
  • складні CSS-селектори і deeply nested layout
  • синхронні JS-скрипти в <head>

Мета оптимізації

Зробити так, щоб сторінка малювалася швидко, плавно, без ривків і "білих екранів", особливо на слабких пристроях.

Коротка відповідь

Для співбесіди
Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.

Запропонувати правку