will-change: предварительная подсказка о будущем изменении
Will-change сообщает браузеру, какое свойство элемента ожидается изменить. Это средство для устранения измеренной проблемы анимации, а не обязательная настройка каждого движущегося компонента.
Назначение
Will-change сообщает браузеру, какое свойство элемента ожидается изменить. Это средство для устранения измеренной проблемы анимации, а не обязательная настройка каждого движущегося компонента.
Как это работает
В демонстрации подсказка относится к transform. В рабочем интерфейсе её обычно включают заранее на ограниченном числе элементов и снимают после завершения необходимости. Короткий пример позволяет сравнить поведение в инструментах.
Пример
<style>.moving-note{display:inline-block;padding:1rem;background:#dceee3;transition:transform .2s;will-change:transform}.moving-note:hover{transform:translateY(-3px)}@media(prefers-reduced-motion:reduce){.moving-note{transition:none}.moving-note:hover{transform:none}}</style>
<p class="moving-note">Учебный элемент для измерения</p>Что должно получиться
При наведении блок немного сдвигается, а при предпочтении уменьшенного движения сдвиг отключён. Само наличие will-change не гарантирует видимое улучшение по сравнению с обычным transform.
Граница применения и частая ошибка
Множество постоянно активных подсказок расходует ресурсы. Некоторые значения заранее создают контекст наложения и меняют результат z-index. Не используйте will-change для исправления логической ошибки раскладки и не обещайте отдельный графический слой во всех браузерах.
Самостоятельная проверка
Сравните запись производительности с подсказкой и без неё на реальном компоненте. Посмотрите расход ресурсов при множестве копий. Если выигрыша нет, удалите will-change и оставьте более простые стили.
HTML и CSS можно изменить в песочнице ниже. Она изолирована: JavaScript, внешние ресурсы и отправка форм отключены. Проверки печати, загрузки файлов и сетевых ответов выполняйте в отдельном учебном проекте.