Что является наиболее затратным при отрисовке страницы?

Question

Самое затратное при отрисовке — это layout (reflow) и paint, особенно когда они вызываются многократно из-за изменений DOM или CSS. Браузеру приходится пересчитывать геометрию всех элементов и заново перерисовывать пиксели. Также дорого стоят большие изображения, сложные CSS-эффекты и синхронный JavaScript, блокирующий рендеринг.

YeaHub · Accepted Answer

Отрисовка страницы — это конвейер, который браузер проходит после получения HTML, CSS и JavaScript. Наиболее затратными этапами обычно являются layout (reflow) и paint, а также composite при работе с анимациями. Понимание этих этапов помогает оптимизировать интерфейсы.

Этапы рендеринга

Style — вычисление стилей для каждого элемента.
Layout — расчёт геометрии (позиции и размеры).
Paint — заполнение пикселей (цвета, тени, границы).
Composite — объединение слоёв на GPU.

Layout самый дорогой, потому что изменение одного элемента может потребовать пересчёта всей страницы. Например, изменение ширины контейнера заставляет браузер пересчитать позиции всех дочерних элементов.

Что вызывает reflow и repaint

Изменение размеров, отступов, шрифтов, позиционирования.
Добавление или удаление DOM-узлов.
Чтение свойств вроде offsetHeight, getBoundingClientRect() после записи — вызывает принудительный синхронный layout.
Анимации свойств width, top, left вместо transform и opacity.

Пример оптимизации

// Плохо: чередование чтения и записи вызывает reflow на каждой итерации
for (let i = 0; i < items.length; i++) {
  items[i].style.width = items[i].offsetWidth + 10 + 'px';
}

// Хорошо: сначала читаем, потом пишем
const widths = items.map(el => el.offsetWidth);
items.forEach((el, i) => {
  el.style.width = widths[i] + 10 + 'px';
});

Также дорого стоят большие изображения без указания размеров, сложные CSS-фильтры, box-shadow и blur, а также синхронные скрипты в <head>, блокирующие парсинг HTML.

Итог: для плавного интерфейса минимизируйте reflow, используйте transform и opacity для анимаций, выносите тяжёлые вычисления из критического пути и оптимизируйте ресурсы. Это особенно важно для мобильных устройств и слабых CPU.

Что является наиболее затратным при отрисовке страницы?

Короткий ответ

Длинный ответ

Этапы рендеринга

Что вызывает reflow и repaint

Пример оптимизации

Что является наиболее затратным при отрисовке страницы?

Короткий ответ

Длинный ответ

Этапы рендеринга

Что вызывает reflow и repaint

Пример оптимизации