Ответ
Оптимизация до одного Paint достигается за счёт использования will-change и transform/opacity, которые не вызывают Layout/Compose. Пример:
.optimized {
will-change: transform; /* Подсказка браузеру */
transform: translateZ(0); /* Аппаратное ускорение */
opacity: 0.99; /* Фикс для некоторых браузеров */
}Как это работает:
transformиopacityанимируются в отдельном слое (Composite)- Браузер пропускает этапы Layout и Compose
- Изменения применяются напрямую в Paint
Когда использовать:
- Анимации
- Прокрутка сложных элементов
- Частые визуальные изменения
⚠️ Не злоупотребляйте — каждый слой потребляет память.
Ответ 18+ 🔞
Да ты посмотри, какие штуки бывают! Вот берёшь ты элемент, и он у тебя как сумасшедший дёргается, браузер потеет, как конь, пересчитывая всю хуйню вокруг. А всё почему? Потому что ты его не туда, блядь, послал — он и Layout, и Compose этапы проходит, как дурак по минному полю.
А можно сделать изящно, как фокусник из шляпы. Смотри сюда, гений:
.optimized {
will-change: transform; /* Эй, браузер, готовься, ща будет движуха! */
transform: translateZ(0); /* Вжух — и ты уже на отдельном слое, как сын маминой подруги! */
opacity: 0.99; /* А это чтоб совсем старые браузеры не косячили, чих-пых их в сраку. */
}В чём тут магия, спросишь?
- Элемент с
transform/opacityбраузер, такой: «О, да я эту мартышку знаю!». И выносит его на отдельный, блядь, графический слой. Там он и живёт, особняком. - И когда ему надо пошевелиться, весь остальной мир (Layout, Compose) остаётся нетронутым. Браузер не пересчитывает всю страницу, он просто, понимаешь, перерисовывает этот один слой. Один Paint — и делов-то!
- Всё изменение происходит прямо на этапе композитинга. Быстро, чётко, без лишней суеты. Красота, ёпта!
Когда эту дуриловку применять?
- Когда что-то плавно двигаешь, анимации всякие.
- Когда сложный элемент скроллишь и он без этого лагает, как тормоз.
- Ну или когда просто часто-часто меняешь что-то визуальное.
⚠️ Но вот что, дружок-пирожок: не набрасывай эту приблуду на всё подряд, а то будет тебе овердохуища слоёв в памяти. Каждый такой слой — он как отдельная квартира, ресурсы жрёт. Наделаешь их много — браузер захлебнётся и накроется медным тазом. Используй с умом, хитрая жопа!