intermediate
Paint
Понимайте, когда пиксели растеризуются, как работает paint invalidation и почему shadows и filters могут быть дорогими.
Paint превращает layout boxes и визуальные стили в пиксели. Смена цвета, тени, filters, clipping и крупные фоны инвалидируют закрашенные области. Оптимизация paint — уменьшить изменённую область, упростить дорогие эффекты там, где они заметны, и в DevTools проверить, что узкое место именно paint.
.card {
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15); /* расширяет invalidation paint */
}
Paint flashing в DevTools показывает неожиданный repaint всего слоя. Продвижение слоёв ради обхода paint обменивается на память и upload.
На интервью: разделяйте layout, paint и composite, а не считайте все визуальные обновления одинаковыми.
Типовые ошибки: layer promotion ради paint увеличивает память и всё равно даёт дорогую растеризацию.
Компромисс: удобство против контроля — выбирайте механизм под вашу связность и бюджет производительности.
Чеклист:
- Ищите paint invalidation в инструментах.
- Уменьшайте область и сложность эффектов.
- Не анимируйте дорогие paint-only свойства вслепую.
- Подтвердите bottleneck до оптимизации.