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

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

Свойство will-change изначально предлагалось под названием will-animate, прежде чем его переименовали.

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

Значения должны быть разделены запятыми. Свойство will-change может принимать следующие значения: auto, <custom-ident>, initial, inherit или unset.

WARNING

Это свойство следует использовать с осторожностью. Разные браузеры обрабатывают его по-разному, и чрезмерное использование может привести к тому, что браузер проигнорирует его. Чрезмерное использование также может принудительно создавать ненужные слои композитинга, что увеличивает потребление памяти и снижает производительность.

Правильное использование свойства will-change:

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

Начальное значение	auto
Применяется к	Ко всем элементам.
Наследуется	Нет.
Анимация	Нет.
Версия	CSS Transitions Module Level 1
Синтаксис DOM	`object.style.willChange = "transform";`

Примечание: В JavaScript имя свойства использует camelCase (willChange), тогда как в CSS свойство использует дефисы (will-change).

Синтаксис

Значения CSS will-change

css

will-change: auto | <custom-ident> | initial | inherit | unset;

Пример свойства will-change:

Пример кода CSS will-change

html

<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document</title>
    <style>
      .circle {
        width: 50px;
        height: 50px;
        transform: translate(50px, 0px);
        border-radius: 30px;
      }
      .circle.blue {
        background: #1c87c9;
        will-change: transform;
      }
      .circle.green {
        background: #8ebf42;
      }
    </style>
  </head>
  <body>
    <h2>Will-change property example</h2>
    <div class="circle green"></div>
    <div class="circle blue"></div>
    <div class="circle green"></div>
    <div class="circle blue"></div>
    <div class="circle green"></div>
    <script>
      const circles = document.getElementsByClassName("circle blue");
      function update(t) {
        for (let i = 0; i < circles.length; i++) {
          const xpos = Math.sin(t / 1000 + 1000 * i) * 50 + 50;
          circles[i].style.transform = "translate(" + xpos + "px, 0px)";
        }
        window.requestAnimationFrame(update);
      }
      update();
    </script>
  </body>
</html>

Try it Yourself »

Значения

Значение	Описание
auto	Следует применить стандартную оптимизацию браузера.
`<custom-ident>`	Указывает CSS-свойство, которое, как ожидается, изменится или анимируется на элементе в ближайшем будущем. Если свойство является сокращённым, изменения распространятся на все его длинные аналоги.
initial	Заставляет свойство использовать значение по умолчанию.
inherit	Наследует свойство от родительского элемента.
unset	Сбрасывает свойство к его унаследованному или начальному значению в зависимости от свойства.

Практика

Свойство CSS will-change может принимать следующие значения, кроме:

CSS свойство will-change ​

Правильное использование свойства will-change: ​

Синтаксис ​

Пример свойства will-change: ​