Что происходит на этапах Layout, Paint и Composite?

Когда браузер отображает страницу, он проходит через несколько последовательных стадий рендеринга.

Определение

Рендеринг — это процесс преобразования HTML и CSS в изображение, которое пользователь видит на экране.

Этап Layout

На этом этапе браузер:

• вычисляет размеры элементов

• определяет их положение

• учитывает шрифты, отступы и размеры контейнеров

Layout запускается, если меняются свойства, влияющие на геометрию, например width, height, margin.

Этап Paint

После расчёта геометрии браузер:

• рисует текст, цвета, тени, границы

• заполняет фон элементов

• подготавливает визуальное представление слоёв

Paint не меняет размеры элементов, а только их внешний вид.

Этап Composite

На последнем этапе:

• слои объединяются

• применяется трансформация и прозрачность

• результат отправляется на GPU и выводится на экран

Этот этап самый дешёвый по производительности.

Почему это важно

Разные CSS-свойства:

• могут вызывать Layout

• могут вызывать только Paint

• могут ограничиться Composite

От этого напрямую зависит производительность интерфейса.

Краткий вывод

Layout самый дорогой этап, Paint дешевле, а Composite самый быстрый. Чем меньше этапов затрагивает изменение, тем плавнее работает UI.