Слои композитора: продвижение, перекрытие и память GPU

Вы добавляете will-change: transform одной карточке в списке — чтобы анимация ховера была плавной. Панель Layer Borders в DevTools загорается сорока цветными рамками, о которых вы не просили. Браузер повысил соседей, потому что не мог иначе.

Как элементы попадают к композитору

Одни элементы получают собственный слой композитора:

• transform: translate3d(...) и любой 3D-transform
• will-change: transform (или любое компонуемое свойство)
• position: fixed
• <video>, <canvas>
• Анимируемый прямо сейчас opacity
• filter: blur(...) и другие графические фильтры
• Изолированные stacking-контексты, перекрывающие другой слой

Каждый слой растеризуется один раз (отрисовка), загружается в GPU, а потом дёшево рекомпонуется следующие тысячи кадров. Анимировать transform слоя «бесплатно» — главный поток может спать. Анимировать его top дорого — главный поток пересчитывает мир каждый кадр.

Правило перекрытия: слои, которых вы не просили

Композитор обязан сохранять визуальную корректность. Если элемент A — слой (скажем, с transform) и элемент B рисуется поверх A в document order без собственного слоя, композитор не сможет разрешить их z-стек: слой A окажется поверх B, хотя B должен быть выше.

Браузер решает это, повышая B до собственного слоя, нередко утащив за собой соседние элементы. Затем компоzитор сжимает соседние неанимируемые слои в общий «squashed»-слой, чтобы ограничить взрыв, но эвристика несовершенна.

Один невинный will-change: transform на карточке в середине ленты может повысить дюжину соседей.

Используйте Rendering-панель DevTools → «Layer Borders», чтобы видеть, что повышено. Обращайте внимание на слои с метками «compositor-induced» или «overlap» — они пробрались без вашего ведома.

will-change как обоюдоострое оружие

will-change: transform — подсказка браузеру: «Я скоро анимирую это свойство, заранее подготовь bitmap, чтобы композитор мог двигать его, не возвращаясь к компоновке или отрисовке». Браузер немедленно повышает элемент.

Цена: память GPU — ширина × высота × 4 байта на слой.

Анти-паттерн will-change: will-change: transform на каждом компоненте в дизайн-системе постоянно резервирует слой для каждого экземпляра. В списке из 100 карточек с 5 элементами с will-change каждая — страница держит 500 слоёв, возможно, сотни МБ памяти GPU. На телефоне с 256 МБ GPU-памяти ОС начинает вытеснять; браузер растеризует повторно на лету, и страница заикается сильнее, чем без слоёв.

Лечение: устанавливайте will-change непосредственно перед началом анимации (например, на mouseenter) и убирайте на animationend. Относитесь к нему как к сигналу «вперёд», а не постоянной настройке.