intermediate

Pipeline рендеринга

Разбор HTML и CSS, style calculation, layout, paint, compositing, инвалидация и рассуждение о frame budget.

На интервью по pipeline рендеринга проверяют, умеете ли вы проследить изменение стиля или DOM через parse, style, layout, paint и composite — и заметить forced synchronous layout.

Подтемы: парсинг HTML и CSS, style calculation, layout, paint и compositing.

На интервью: объясните, почему CSS блокирует first paint, что вызывает reflow и какие анимации остаются на compositor.

Типовые ошибки: одинаковая «цена» всех визуальных обновлений, циклы read-write в scroll-обработчиках и will-change на каждом элементе.

Чеклист:

  • Знайте DOM/CSSOM и blocking resources.
  • Батчите reads до writes.
  • Разделяйте стоимость layout, paint и composite.
  • Профилируйте в DevTools до догадок.