Перевод не завершен. Пожалуйста, помогите перевести эту статью с английского.
Это экспериментальная технология
Так как спецификация этой технологии ещё не стабилизировалась, смотрите таблицу совместимости по поводу использования в различных браузерах. Также заметьте, что синтаксис и поведение экспериментальной технологии может измениться в будущих версиях браузеров, вслед за изменениями спецификации.
CSS свойство will-change
предоставляет автору возможность уведомить браузер об ожидаемом изменении элемента, таким образом браузер может настроить соответсвующую оптимизацию до того как элемент действительно изменится. Такой тип оптимизации может повысить отзывчивость страницы, совершая, возможно дорогие операции до того как они действительно понадобятся.
Правильно использование этого свойства может быть немного сложнее:
-
Не применяйте will-change к большому числу элементов. Браузер итак пытается изо всех сил всё оптимизировать. Некоторые тяжелые оптимизации ссылающиеся на
will-change
используют много аппаратных мощностей, и если злоупотреблять этим, это может привести к замедлению работы страницы и потреблению большого количества ресурсов. -
Используйте умеренно. Обычное поведение для оптимизаций которые выполняет браузер, удалить оптимизацию как можно скорее и вернуть нормальное состояние. Но добавление
will-change
прямо в файле стилей предполагает, что указанный элемент всегда находится в нескольких шагах от изменений и браузер будет сохранять для него оптимизацию гораздо больше времени. Так что, было бы хорошо включать и отключатьwill-change
используя скрипт до и после того как произошли изменения. -
Не применяйте will-change к элементам для выполнения преждевременной опимизации. Если ваша страница хорошо отрабатывается, не применяйте
will-change
свойство к элементу только чтобы выжать немного больше скорости.will-change
предназначен для использования в крайнем случае, для того чтобы исправить существующие проблемы оптимизации. Его не следует использовать для предвидения проблем оптимизации. Черезмерное использованиеwill-change
приведет к излишнему потреблению памяти и вызовет более тяжелый рендеринг так как браузер будет пытаться подготовиться к возможным изменениям. Это приведет к ухудшению производительности. -
Дайте ему достаточно времени, чтобы работать. Это свойство дает автору способ указать пользовательскому агенту свойства, которые могут измениться в будущем. Затем браузер может применить любые предварительные оптимизации, необходимые для изменения свойств до того, когда эти свойства изменятся. Поэтому важно дать браузеру некоторое время, чтобы провести оптимизацию. Найдите способ предсказать изменение хотя бы немного заранее, что-то изменится, и затем установите изменение.
Начальное значение | auto |
---|---|
Применяется к | все элементы |
Наследуется | нет |
Отображение | всё |
Обработка значения | как указано |
Animation type | discrete |
Канонический порядок | уникальный неоднозначный порядок, определённый формальной грамматикой |
Синтаксис
Formal syntax: auto | <animateable-feature>#где
<animateable-feature> = scroll-position | contents | <custom-ident>
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> will-change: unset will-change: initial will-change: inherit
Значения
auto
- Это ключевое слово не выражает конкретной цели; пользовательский агент должен применяться независимо эвристики и оптимизации как он это обычно делает.
<Animateable-feature> может иметь одно из следующих значений:
scroll-position
- Указывает, что автор ожидает анимацию или изменение положения скролла элемента в ближайшем будущем.
contents
- Указывает, что автор ожидает анимацию или изменение чего то в контенте элемента в ближайшем будущем.
<custom-ident>
- Указывает, что автор ожидает анимацию или измение свойства с заданным именем в элементе в ближайшем будущем. If the property given is a shorthand, it indicates the expectation for all the longhands the shorthand expands to. Это не может быть одним из следующих значений:
unset
,initial
,inherit
,will-change
,auto
,scroll-position
, илиcontents
.
Examples
.sidebar { will-change: transform; }
The above example adds the will-change
property directly to the stylesheet, which will cause the browser to keep the optimization in memory for much longer than it is needed and we've already seen why that should be avoided. Below is another example showing how to apply the will-change
property through scripting, which is probably what you should be doing in most cases.
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'; }
It may however be appropriate to include will-change in your style sheet for an application that does page flips on key presses like an album or a slide deck presentation where the pages are large and complex. This will let browser prepare the transition ahead of time and allow for snappy transitions between the pages as soon as the key is pressed.
.slide { will-change: transform; }
Specification
Specification | Status | Comment |
---|---|---|
CSS Will Change Module Level 1 Определение 'will-change' в этой спецификации. |
Рабочий черновик | Initial definition |
Браузерная совместимость
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] From Firefox 31 to 35, will-change
was available, but only if the user flipped the layout.css.will-change.enabled
flag to true
.