Браузер и фронтенд-рантайм
Render pipeline: тест с выбором ответа
Суть Тест с выбором на синтез по всему юниту render pipeline — стоимость стадий, радиус инвалидации, compositor layers, layout thrashing и production-телеметрия.
Высота — путь к senior
НольJuniorMiddleSenior
Ты на senior-высоте — в орбитеШесть вопросов поперёк всего pipeline. Каждый отражает решение, которое ты принимаешь в реальном расследовании джанка — не стадию для называния, а стоимость для прогноза и фикс для ранжирования.
Цель
Убедись, что связываешь шесть стадий, правила инвалидации, compositor layers, layout thrashing и production-метрики — тот синтез, к которому вели отдельные уроки.
Викторина
Completed
Обработчик скролла анимирует элемент списка, записывая element.style.top каждый кадр, и страница дёргается на среднем телефоне. Коллега говорит: это на компоненте композитинга, значит дело в GPU. Почему он неправ?
Heads-up Off-main-thread скролл обрабатывает сдвиг вьюпорта, но запись top внутри обработчика — это мутация, инвалидирующая layout, и она идёт на main thread, а не на GPU.
Heads-up transform на promoted layer — composite-only; top инвалидирует layout. Разница в стоимости на порядок, именно поэтому телефон дёргается на одном и не на другом.
Heads-up rAF группирует вызов к границе кадра, но всё равно выполняется на main thread; он не переносит инвалидирующие layout записи с main thread.
Викторина
Completed
Страница рендерит ленту из 10 000 строк. style + layout на первой отрисовке стоят 1 200 мс. Нужна быстрая первая отрисовка без виртуализации (без переписывания DOM). Какое одно изменение даёт максимальный рычаг?
Heads-up will-change промоутит строки в GPU-слои (стоимость памяти), но никак не пропускает style/layout внеэкранных строк. На мобильной GPU-памяти это только усугубляет проблему.
Heads-up rAF группирует момент вызова колбэка, а не объём layout для 10 000 строк. Полный style+layout всё равно выполняется для каждой строки.
Heads-up contain: paint обрезает отрисовку и помогает пропустить внеэкранный paint, но не пропускает style и layout так, как делает display-locking через content-visibility: auto. Layout всё равно выполняется для всех строк.
Викторина
Completed
Ты добавляешь will-change: transform на одну карточку в ленте ради плавного hover. DevTools Layer Borders теперь показывает сорок promoted-боксов. Почему и какова стоимость?
Heads-up will-change — это CSS-подсказка рендеринга без стоимости JS. Лишние боксы — это compositor-induced слои из overlap rule, а стоимость — GPU-память, не CPU.
Heads-up Promoted layer отрисовывается один раз и затем двигается на compositor. Стоимость — удержание битмапа в GPU-памяти, а не перерисовка покадрово.
Heads-up Это настоящие compositor layers, созданные overlap rule. На мобильном бюджете GPU 256 МБ десятки полноразмерных слоёв вызывают вытеснение тайлов и худший джанк.
Викторина
Completed
Main thread заблокирован на 400 мс синхронным JSON.parse. CSS-анимация на transform продолжает идти 60 fps; командная rAF-анимация на том же элементе застывает. Каков механизм?
Heads-up Она выживает, потому что идёт на compositor на полных 60 fps, независимо от заблокированного main thread, — а не потому, что её троттлят.
Heads-up Composite-only CSS-анимации передаются compositor thread; rAF идёт на main thread. Разница архитектурная, не случайная.
Heads-up Синхронный JSON.parse идёт на main thread и блокирует его; именно поэтому main-thread rAF-анимация застывает, а compositor-анимация нет.
Викторина
Completed
Production RUM сообщает p75 INP 340 мс, тогда как Lighthouse в офисе ставит 95. Обработчик клика читает getBoundingClientRect(), а затем пишет стили в цикле. Как это читать и куда смотреть первым делом?
Heads-up INP из RUM — это то, что реальные пользователи почувствовали на реальном железе. p75 340 мс — настоящая регрессия интерактивности, которую лабораторный прогон Lighthouse на быстром железе легко пропускает.
Heads-up CLS измеряет неожиданный сдвиг layout; INP измеряет задержку input-to-next-paint. Это разные vitals; forced sync layout в обработчике — проблема INP.
Heads-up rAF двигает границу вызова, но чтение после записи всё равно форсирует синхронный flush layout. Структурный фикс — сгруппировать все чтения перед всеми записями.
Викторина
Completed
Слушатель touchmove добавлен без { passive: true } на контейнере скролла, и fps скролла обваливается на мобильном. Что изменилось в pipeline?
Heads-up passive против non-passive не меняет частоту срабатывания. Это меняет, может ли compositor скроллить, не дожидаясь main-thread обработчика.
Heads-up Non-passive слушатель не поглощает событие; он вынуждает браузер ждать обработчик, прежде чем решить скроллить, откатываясь к main-thread скроллу.
Heads-up Регрессия реальна: compositor-thread скролл становится main-thread скроллом, так что fps скролла падает всякий раз, когда main thread занят.
Итог
Сквозная линия юнита — одна цепочка решений: свойство, которое ты меняешь, выбирает стадию для инвалидации (transform = composite, color = paint, top/width = layout), dirty bits текут вниз по потоку, а containment или content-visibility ограничивают радиус поражения. Compositor layers дёшевы для движения, но дороги для удержания, overlap rule промоутит соседей, которых ты не просил, layout thrashing берётся из чтения геометрии после записи, а INP плюс LoAF замыкают петлю от production-телеметрии назад к конкретной стадии. Спрогнозируй стадию, ранжируй фикс, затем тянись к compositor.