Свойство will change css

will-change

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

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

/* Keyword values */ will-change: auto; will-change: scroll-position; will-change: contents; will-change: transform; /* Example of */ will-change: opacity; /* Example of */ will-change: left, top; /* Example of two */ /* 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 приведёт к излишнему потреблению памяти и вызовет более тяжёлый рендеринг так как браузер будет пытаться подготовиться к возможным изменениям. Это приведёт к ухудшению производительности.
• Дайте ему достаточно времени, чтобы работать. Это свойство даёт автору способ указать пользовательскому агенту свойства, которые могут измениться в будущем. Затем браузер может применить любые предварительные оптимизации, необходимые для изменения свойств до того, когда эти свойства изменятся. Поэтому важно дать браузеру некоторое время, чтобы провести оптимизацию. Найдите способ предсказать изменение хотя бы немного заранее, что-то изменится, и затем установите изменение.

Синтаксис

Значения

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

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

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

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

Указывает, что автор ожидает анимацию или изменить свойства с заданным именем в элементе в ближайшем будущем . Если заданное свойство-это сокращённая запись, тогда оно указывает на все полные записи свойств, на которые указывает сокращённая запись. Это не может быть одним из следующих значений: 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; > 

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

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

BCD tables only load in the browser

Found a content problem with this page?

This page was last modified on 7 нояб. 2022 г. by MDN contributors.

Your blueprint for a better internet.

MDN

Support

Our communities

Developers

Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.

Источник

will — change

Заранее сообщаем браузеру, какие свойства у элементов будут меняться.

Время чтения: меньше 5 мин

Кратко

Скопировать ссылку «Кратко» Скопировано

Свойство will — change позволяет заранее сообщить браузеру об изменениях (анимация, перемещение и т.д), которые могут произойти с элементом. Так браузер успеет оптимизировать выполнение этих изменений до того, как они произойдут. Это повышает скорость работы сайта.

Пример

Скопировать ссылку «Пример» Скопировано

Чтобы включить will — change , нужно добавить следующее правило для элемента, который будет изменяться:

 div  will-change: /* значение */;> div  will-change: /* значение */; >    Скопировать Скопировано Не удалось скопировать   

Значения

Скопировать ссылку «Значения» Скопировано

Свойство will — change принимает одно из четырёх возможных значений:

• auto — не указывает никакого конкретного свойства, браузер будет работать как обычно. Значение по умолчанию.
• scroll — position — указывает, что ожидается изменение положения элемента при прокрутке страницы. Браузер заранее готовится и отрисовывает содержимое за пределами видимой части страницы.
• contents — указывает, что ожидается изменение содержимого элемента. Браузер ограничивает или полностью прекращает кэширование элемента и отрисовывает его с нуля при каждом изменении его содержимого.
• меняющееся свойство — имя свойства, которое будет изменяться (transform, opacity и т.д). Несколько свойств разделяются запятыми.

 div  will-change: transform; will-change: opacity; will-change: top, left, bottom, right;> div  will-change: transform; will-change: opacity; will-change: top, left, bottom, right; >    Скопировать Скопировано Не удалось скопировать   

Подсказки

Скопировать ссылку «Подсказки» Скопировано

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

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

На практике

Скопировать ссылку «На практике» Скопировано

Ксения Мадей советует

Скопировать ссылку «Ксения Мадей советует» Скопировано

🛠 will — change необходимо включить до изменения состояния элемента. Если применить это свойство в процессе изменения состояния, оно не успеет сработать и не даст никакого эффекта.

 /* Изменение элемента происхожит при наведении курсора */.element:hover  /* нужно подготовиться к изменению, которое уже происходит, код не сработает */ will-change: transform; transition: transform 2s; transform: rotate(30deg) scale(1.5);> /* Изменение элемента происхожит при наведении курсора */ .element:hover  /* нужно подготовиться к изменению, которое уже происходит, код не сработает */ will-change: transform; transition: transform 2s; transform: rotate(30deg) scale(1.5); >    Скопировать Скопировано Не удалось скопировать   

Если изменение элемента происходит при клике на него, will — change можно включать при наведении курсора на элемент. Это даёт браузеру время подготовиться до того, как произойдёт изменение .

 .element  /* правила */ transition: transform 1s ease-out;> .element:hover  /* браузер начинает готовиться к изменению состояния */ will-change: transform;> .element:active  /* происходит изменение состояния */ transform: rotateY(180deg);> .element  /* правила */ transition: transform 1s ease-out; > .element:hover  /* браузер начинает готовиться к изменению состояния */ will-change: transform; > .element:active  /* происходит изменение состояния */ transform: rotateY(180deg); >    Скопировать Скопировано Не удалось скопировать   

Если изменение происходит при наведении курсора на элемент, то можно включать will — change при наведении на родительский элемент:

 .element  transition: opacity 0.3s linear;> /* включаем will-change для элемента, когда мышка наводится на его родительский элемент */.parent:hover .element  will-change: opacity;> /* применение изменения, когда мышка наведена на элемент */.element:hover  opacity: 0.5;> .element  transition: opacity 0.3s linear; > /* включаем will-change для элемента, когда мышка наводится на его родительский элемент */ .parent:hover .element  will-change: opacity; > /* применение изменения, когда мышка наведена на элемент */ .element:hover  opacity: 0.5; >    Скопировать Скопировано Не удалось скопировать   

🛠 Рекомендуется отключать will — change сразу после того, как закончится изменение элемента. Поэтому лучше назначать это свойство через JavaScript. Если назначить его через CSS, его невозможно будет убрать после выполнения изменения и оно будет продолжать расходовать ресурсы.

Пример назначения через JS:

 // Получаем доступ к элементу, который будет изменяться при клике по немуconst el = document.getElementById('element') // Включаем will-change при наведении курсора на элементel.addEventListener('mouseenter', hintBrowser)el.addEventListener('animationEnd', removeHint) function hintBrowser()  // Свойства, которые будут изменяться в блоке // описания анимации и которые можно заранее оптимизировать this.style.willChange = 'transform, opacity'> // Для отключения свойства устанавливаем ему значение по умолчаниюfunction removeHint()  this.style.willChange = 'auto'> // Получаем доступ к элементу, который будет изменяться при клике по нему const el = document.getElementById('element') // Включаем will-change при наведении курсора на элемент el.addEventListener('mouseenter', hintBrowser) el.addEventListener('animationEnd', removeHint) function hintBrowser()  // Свойства, которые будут изменяться в блоке // описания анимации и которые можно заранее оптимизировать this.style.willChange = 'transform, opacity' > // Для отключения свойства устанавливаем ему значение по умолчанию function removeHint()  this.style.willChange = 'auto' >    Скопировать Скопировано Не удалось скопировать   

Иногда will — change допускается назначать через CSS. Это относится к часто используемым элементам (например, анимация кнопки или сайдбара) и к изменениям, которые происходят на странице постоянно (например, анимация, которая происходит при движении курсора мышки).

В остальных случаях will — change лучше назначать через JS и отключать после завершения изменения элемента.

Источник