Какие этапы рендеринга в браузере

Что проверяют

Можете ли вы описать конвейер рендеринга целиком и объяснить, какие его шаги повторяются при каждом изменении страницы. Второе для фронтендера важнее: следом спрашивают, почему интерфейс дёргается при прокрутке и как это найти.

Как отвечать

Первая загрузка проходит весь путь, дальше каждый кадр повторяет только его часть:

• DOM и CSSOM: разбор HTML и стилей в два дерева, JavaScript может менять оба;
• style: для каждого узла вычисляются итоговые значения свойств;
• layout: геометрия элементов, узлы с display: none в раскладку не попадают;
• paint: запись команд отрисовки в порядке наложения;
• слои и растеризация: страница делится на слои, слои растеризуются тайлами, часто на GPU;
• composite: поток композитора собирает слои в кадр и отдаёт на экран.

Дальше покажите, что понимаете про кадры. При 60 Гц на кадр около 16,7 мс, и в них должны уложиться обработчики событий, requestAnimationFrame, style, layout и paint на главном потоке. Задачи дольше 50 мс считаются длинными и напрямую портят INP, метрику отзывчивости из Core Web Vitals, которая в 2024 году заменила FID. Прокрутка и CSS-анимации transform и opacity выполняются в потоке композитора и переживают занятый главный поток, а всё, что требует layout, нет.

Привяжите к фреймворку. React собирает изменения состояния в один коммит, но DOM всё равно пересчитывает браузер: виртуальный DOM сокращает число операций, а не отменяет layout и paint. Изменения, зависящие от размеров, делают в useLayoutEffect или requestAnimationFrame, тяжёлые вычисления выносят в Web Worker. Искать проблему удобно во вкладке Performance по отметкам длинных задач и сдвигов раскладки.

Где спотыкаются

Называют render tree последним шагом, после которого «браузер рисует». Раскладка, рисование, растеризация и композитинг это разные этапы с разной ценой, и на этом различии строится вся оптимизация.

Верят, что виртуальный DOM избавляет от reflow. Любое изменение геометрии в итоге всё равно пересчитывает layout.

Смотрят только на загрузку. Большая часть жалоб на тормоза появляется после неё: длинные обработчики кликов, анимация height, чтение размеров в цикле.