Как оптимизировать paint в браузере?

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

Paint — отрисовка пикселей элемента. Дорогие paint свойства: box-shadow (сложные), border-radius, filter, background-gradient. DevTools → Rendering → Paint flashing — зелёным подсвечивает перерисовываемые области. Оптимизации: contain: paint для изоляции, will-change для выноса на GPU layer, transform вместо top/left для анимаций. Избегай анимации width/height — вызывает layout + paint. opacity и transform — только compositing, без paint. Упрощай тени и градиенты на мобильных.

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

Что делает useDeferredValue?