intermediate

Производительность CSS

Critical CSS, пересчёт стилей, layout thrashing, стоимость paint, compositing и render-blocking ресурсы.

На интервью по производительности CSS связывают доставку стилей с воспринимаемой скоростью: critical path CSS, render-blocking ресурсы, layout thrashing из JavaScript и pipeline рендеринга браузера.

Подтемы: critical CSS, layout thrashing и repaints vs reflows.

На интервью: как CSS влияет на LCP, что такое forced synchronous layout и какие изменения свойств остаются на compositor.

Типовые ошибки: inline целых stylesheet, циклы read-write в анимациях, анимация width или top без профилирования.

Чеклист:

Измеряйте render blocking до оптимизации.
Батчите DOM reads и writes.
Для motion предпочитайте transform и opacity.
Профилируйте фазы pipeline в DevTools.