Что происходит в RenderQueue?

Вот в такой последовательности исполняется рендер:

JS (RequestAnimationFrame) > Style > Layout > Paint > Composite

Этап JS (RequestAnimationFrame)

В момент, когда браузер освобождается от JS-тасок и микротасок, он готов выполнять рендер. С помощью колбека requestAnimationFrame можно «подписаться на свободный момент» в общей очереди исполнения задач. Так как браузер гарантированно будет «не занят» чем-то другим, то это удобный момент, чтобы отрисовать анимацию, посчитать что-то или изменить кадр до его отрисовки.

Этап Style

На этом этапе выясняется, какие CSS-правила применяются к элементам на странице и затем вычисляются (computed) значения CSS-свойств всех необходимых правил. Также если из JS напрямую изменяются значения CSS-свойств или на элементы навешиваются CSS-классы, то тоже запускается этот этап.

Этап Layout

Браузер определяет слои с элементами, вычисляет, какого размера элементы, и где они находятся в слое. Так как элементы в слое влияют друг на друга в потоке, то изменение размеров одного элемента может повлечь сдвиг и повторный layout дочерних или последующих элементов. При изменении размеров элементов в JS или даже при считывании информации о размерах, браузер форсирует исполнение layout — выполняет force layout — что приводит к остановке исполнения JS-тасок или микротасок и экстренной перерисовке. Список операций, форсирующих layout

Этап Paint

Браузер отрисовывает текст, цвета, изображения, рамки и весь остальной внешний вид элементов.

Этап Composite

Браузер разбирается с наложением слоёв друг на друга, с их «композицией». Слои должны отображаться в нужном порядке. В результате этого этапа получается готовый отрисованный кадр с наслоёнными элементами.

Особенные CSS-свойства для этого этапа — transform и will-change. Для элементов с заданным transform браузер задействует процесс composition. В случае с will-change — это подсказка для браузера, что для элемента нужно использовать composition-процесс.