Свойство CSS `will-change`

Свойство will-change CSS позволяет оптимизировать анимацию, предоставляя браузеру подсказку о том, как, предположительно, будет изменяться элемент.

Синтаксис

/* Keyword values */
will-change: auto;
will-change: scroll-position;
will-change: contents;

/* <custom-ident> values */
will-change: transform;
will-change: opacity;

/* multiple values */
will-change: left, top;

/* Global values */
will-change: inherit;
will-change: initial;
will-change: revert;
will-change: revert-layer;
will-change: unset;

Значения

Значением может быть auto или одно либо несколько значений <animatable-feature>, разделённых запятыми:

auto

Указывает, что браузер применяет обычные для него эвристики и оптимизации. Это значение по умолчанию.

<animatable-feature>

Представляет одно из следующих значений:

scroll-position

Указывает, что в ближайшем будущем ожидается изменение положения прокрутки элемента, позволяя браузеру оптимизировать отображение переполняющего содержимого.

contents

Указывает, что в ближайшем будущем ожидается изменение содержимого элемента, включая все элементы в его поддереве, позволяя браузеру менее активно кэшировать элемент.

<custom-ident>

Указывает имя свойства CSS в виде <ident>, значение которого анимируется или, как ожидается, изменится в ближайшем будущем. Если указанное значение <ident> представляет сокращённое свойство, применяются все его полные компоненты. Значение не может быть will-change, none, all, auto, scroll-position или contents.

Описание

Свойство will-change предоставляет браузеру подсказку, указывающую, какие свойства, как ожидается, будут анимироваться или иным образом изменяться. Это позволяет браузерам создать необходимые оптимизации отображения для более плавного внесения изменений и предотвращения рывков.

Свойство will-change предназначено для повышения производительности отображения. Оно может улучшить производительность элементов, которые часто перерисовываются и подвергаются перерасчёту компоновки, а также элементов, использующих такие свойства, как box-shadow и clip-path, для создания сложных визуальных эффектов.

Применение этого свойства к элементу распространяет его значение на всё поддерево элемента, указывая, что любой из дочерних элементов может измениться. По этой причине применение значения, отличного от auto, к большому разделу, например к <body>, может ухудшить производительность страницы. Вместо этого применяйте это свойство только к глубоко вложенным элементам, охватывающим как можно меньшую часть документа.

Правильное использование этого свойства может быть непростым. Учитывайте следующие рекомендации:

• Не применяйте will-change слишком ко многим элементам: браузер и так старается оптимизировать всё, что может. Некоторые из более мощных оптимизаций, которые, вероятно, связаны с will-change, потребляют много ресурсов компьютера. Чрезмерное использование свойства может замедлить страницу вместо того, чтобы повысить её производительность.
• Используйте умеренно: при обычном поведении браузер удаляет оптимизации, как только это становится возможно, и возвращается к исходному состоянию. Но добавление will-change непосредственно в таблицу стилей означает, что целевые элементы могут измениться в любой момент, и браузер будет сохранять оптимизации гораздо дольше, чем в противном случае. Поэтому рекомендуется включать и отключать will-change с помощью скрипта непосредственно до и после изменения.
• Не применяйте will-change к элементам для преждевременной оптимизации: если ваша страница работает хорошо, не добавляйте свойство will-change к элементам только ради небольшого повышения скорости. will-change предназначено для использования в крайнем случае, чтобы попытаться решить уже существующие проблемы с производительностью. Его не следует использовать для предотвращения возможных проблем с производительностью. Чрезмерное использование will-change приведёт к чрезмерному потреблению памяти и более сложному отображению, поскольку браузер будет готовиться к возможным изменениям. Это ухудшит производительность.
• Дайте ему достаточно времени для работы: это свойство позволяет сообщить браузеру о свойствах, которые, вероятно, изменятся, чтобы он мог заранее применить оптимизации до изменения свойства. Поэтому следует дать браузеру время на оптимизацию. Предскажите изменение немного заранее, а затем задайте will-change.
• Помните, что will-change может влиять на внешний вид элементов: при использовании со значениями свойств, создающими контекст наложения (например, will-change: opacity), контекст наложения создаётся заранее.

Анимации

Если вы применяете will-change для улучшения анимации, добавьте это свойство до начала анимации, а не в определения анимации @keyframes. К анимируемым свойствам относятся так, как если бы они уже были включены в will-change, поэтому нет смысла добавлять их туда.

Через таблицу стилей

Добавление will-change в таблицу стилей может быть уместным для приложения, которое перелистывает страницы по нажатию клавиш, например для альбома или презентации, где страницы большие и сложные. Это позволит браузеру заранее подготовить переход и быстро переключаться между страницами сразу после нажатия клавиши. Однако будьте осторожны, добавляя свойство will-change непосредственно в таблицы стилей. Это может заставить браузер сохранять оптимизацию в памяти гораздо дольше, чем нужно.

.slide {
  will-change: transform;
}

Формальное определение

Формальный синтаксис

will-change = 
  auto |
  <animateable-feature>#

<animateable-feature> = 
  scroll-position |
  contents |
  <custom-ident>

Примеры

Основное использование

В этом примере показано базовое применение свойства CSS will-change.

CSS

С помощью CSS мы применяем свойство will-change к #element, сообщая браузеру, что значения свойств transform и opacity будут анимироваться или иным образом изменятся в ближайшем будущем.

#element {
  will-change: transform, opacity;
}

Через скрипт

В этом примере показано, как при необходимости применять свойство will-change и удалять оптимизации после завершения с помощью JavaScript — обычно именно так и следует применять will-change.

JavaScript

Мы используем JavaScript, чтобы добавить свойство will-change к #element при наведении указателя на элемент, используя событие mouseenter. Установка значения will-change в transform, opacity сообщает браузеру, что нужно оптимизировать изменения свойств transform и opacity. При возникновении события animationend наш скрипт устанавливает значение auto.

const el = document.getElementById("element");

el.addEventListener("mouseenter", hintBrowser);
el.addEventListener("animationEnd", removeHint);

function hintBrowser() {
  this.style.willChange = "transform, opacity";
}

function removeHint() {
  this.style.willChange = "auto";
}

Спецификации

Совместимость с браузерами

См. также

• transform
• Отдельные свойства преобразования: translate, scale, rotate
• animation
• модуль CSS will change