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

Question

Layout, Paint и Composite — это основные этапы рендеринга страницы в браузере.
На этапе Layout рассчитываются размеры и позиции элементов.
На этапе Paint элементы рисуются в слои.
На этапе Composite слои объединяются и выводятся на экран.

YeaHub · Accepted Answer

Когда браузер отображает страницу, он проходит через несколько последовательных стадий рендеринга.ОпределениеРендеринг — это процесс преобразования HTML и CSS в изображение, которое пользователь видит на экране.Этап LayoutНа этом этапе браузер:вычисляет размеры элементовопределяет их положениеучитывает шрифты, отступы и размеры контейнеровLayout запускается, если меняются свойства, влияющие на геометрию, например width, height, margin.Этап PaintПосле расчёта геометрии браузер:рисует текст, цвета, тени, границызаполняет фон элементовподготавливает визуальное представление слоёвPaint не меняет размеры элементов, а только их внешний вид.Этап CompositeНа последнем этапе:слои объединяютсяприменяется трансформация и прозрачностьрезультат отправляется на GPU и выводится на экранЭтот этап самый дешёвый по производительности.Почему это важноРазные CSS-свойства:могут вызывать Layoutмогут вызывать только Paintмогут ограничиться CompositeОт этого напрямую зависит производительность интерфейса.Краткий выводLayout самый дорогой этап, Paint дешевле, а Composite самый быстрый. Чем меньше этапов затрагивает изменение, тем плавнее работает UI.