Перейти к содержанию

will-change

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

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

Внимание

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

Синтаксис

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
/* Keyword values */
will-change: auto;
will-change: scroll-position;
will-change: contents;
will-change: transform; /* Example of <custom-ident> */
will-change: opacity; /* Example of <custom-ident> */
will-change: left, top; /* Example of two <animatable-feature> */

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

Правильное использование этого свойства может быть немного сложным:

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

Значения

auto

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

<animatable-feature> может принимать одно из следующих значений:

scroll-position

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

contents

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

<custom-ident>

Указывает, что автор планирует анимировать или изменить свойство с заданным именем элемента в ближайшем будущем. Если заданное свойство является сокращением, оно указывает ожидание для всех сокращений, до которых расширяется сокращение. Это не может быть одно из следующих значений: unset, initial, inherit, will-change, auto, scroll-position или content. Спецификация не определяет поведение конкретного значения, но transform обычно является подсказкой композитного слоя. В настоящее время Chrome выполняет два действия, учитывая определенные идентификаторы свойств CSS: устанавливает новый слой композитинга или новый контекст стека.

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

1
2
3
.slide {
    will-change: transform;
}

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

Поддержка браузерами

Комментарии