will-change

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

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

/* 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 <animateable-feature> */

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

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

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

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

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

  • Дайте ему достаточно времени, чтобы работать. Это свойство дает автору способ указать пользовательскому агенту свойства, которые могут измениться в будущем. Затем браузер может применить любые предварительные оптимизации, необходимые для изменения свойств до того, когда эти свойства изменятся. Поэтому важно дать браузеру некоторое время, чтобы провести оптимизацию. Найдите способ предсказать изменение хотя бы немного заранее, что-то изменится, и затем установите изменение.

Начальное значениеauto
Применяется квсе элементы
Наследуетсянет
Отображениевсё
Обработка значениякак указано
Animation typediscrete
Канонический порядокуникальный неоднозначный порядок, определённый формальной грамматикой

Синтаксис

Значения

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

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

scroll-position
Указывает, что автор ожидает анимацию или изменение положения скролла элемента в ближайшем будущем.
contents
Указывает, что автор ожидает анимацию или изменение чего то в контенте элемента в ближайшем будущем.
<custom-ident>
Указывает, что автор ожидает анимацию или измение свойства с заданным именем в элементе в ближайшем будущем . Если заданное свойство-это сокращенная запись,  тогда оно указывает на все полные записи свойств, на которые указывает сокращенная запись. Это не может быть одним из следующих значений: unset, initial, inherit, will-change, auto, scroll-position, или contents

Примеры

.sidebar {
  will-change: transform;
}

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

var el = document.getElementById('element');

// Set will-change when the element is hovered
el.addEventListener('mouseenter', hintBrowser);
el.addEventListener('animationEnd', removeHint);

function hintBrowser() {
  // The optimizable properties that are going to change
  // in the animation's keyframes block
  this.style.willChange = 'transform, opacity';
}

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

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

.slide {
  will-change: transform;
}

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

Specification Status Comment
CSS Will Change Module Level 1
Определение 'will-change' в этой спецификации.
Кандидат в рекомендации Initial definition

Браузерная совместимость

Update compatibility data on GitHub
КомпьютерыМобильные
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome для AndroidFirefox для AndroidOpera для AndroidSafari on iOSSamsung Internet
will-changeChrome Полная поддержка 36Edge Нет поддержки НетFirefox Полная поддержка 36
Замечания
Полная поддержка 36
Замечания
Замечания Before Firefox 43, Firefox supported will-change: will-change, which is invalid by the specification.
Нет поддержки 31 — 36
Отключено
Отключено From version 31 until version 36 (exclusive): this feature is behind the layout.css.will-change.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE Нет поддержки НетOpera Полная поддержка 24Safari Полная поддержка 9.1WebView Android Полная поддержка 37Chrome Android Полная поддержка 36Firefox Android Полная поддержка 36
Замечания
Полная поддержка 36
Замечания
Замечания Before Firefox 43, Firefox supported will-change: will-change, which is invalid by the specification.
Нет поддержки 31 — 36
Отключено
Отключено From version 31 until version 36 (exclusive): this feature is behind the layout.css.will-change.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android Полная поддержка 24Safari iOS Полная поддержка 9.3Samsung Internet Android Полная поддержка Да

Легенда

Полная поддержка  
Полная поддержка
Нет поддержки  
Нет поддержки
Смотрите замечания реализации.
Смотрите замечания реализации.
Пользователь должен сам включить эту возможность.
Пользователь должен сам включить эту возможность.
Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support 36 36 (36) [1] Нет 24 Нет
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support 37 36.0 (36) [1] Нет Нет Нет

[1] В Firefox с 31 до 35 версии свойство will-change было доступно, но только, если пользователь установил значение флага layout.css.will-change.enabled в true. Выбор был удалён в Firefox 43.

Firefox позволяет установить will-change: will-change до версии 42.0, что не соответствует спецификации. Это было исправлено в Firefox 43.0. Смотрите баг 1195884.