Что такое will-change и GPU acceleration?

Senior
157 просмотров
AFK Offer AI

will-change: transform говорит браузеру подготовить элемент к анимации — выносит на отдельный composite layer (GPU). Элемент рендерится отдельно, анимация не вызывает repaint остальной страницы. transform: translateZ(0) — старый хак для того же. Не злоупотребляй — каждый layer потребляет GPU память. Применяй перед анимацией, убирай после. will-change: auto сбрасывает. Лучшие CSS свойства для анимации: transform и opacity — не вызывают layout/paint, только composite.

Следующий вопрос

Что такое streaming в Next.js?