1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
|
---
title: will-change
slug: Web/CSS/will-change
translation_of: Web/CSS/will-change
---
<p>{{ CSSRef() }}{{SeeCompatTable}}</p>
<p><a href="/en-US/docs/Web/CSS">CSS</a> свойство <code style="font-style: normal;">will-change</code> предоставляет автору возможность уведомить браузер об ожидаемом изменении элемента<span class="seoSummary">, таким образом браузер может настроить соответствующую оптимизацию до того как элемент действительно изменится. Такой тип оптимизации может повысить отзывчивость страницы, совершая, возможно дорогие операции до того как они действительно понадобятся. </span></p>
<pre><code>/* 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;</code></pre>
<p>Правильно использование этого свойства может быть немного сложнее:</p>
<ul>
<li>
<p id="Don't_apply_will-change_to_too_many_elements"><em>Не применяйте will-change к большому числу элементов.</em> Браузер и так пытается изо всех сил всё оптимизировать. Некоторые тяжёлые оптимизации ссылающиеся на <code>will-change</code> используют много аппаратных мощностей, и если злоупотреблять этим, это может привести к замедлению работы страницы и потреблению большого количества ресурсов.</p>
</li>
<li>
<p><em>Используйте умеренно.</em> Обычное поведение для оптимизаций которые выполняет браузер, удалить оптимизацию как можно скорее и вернуть нормальное состояние. Но добавление <code>will-change</code> прямо в файле стилей предполагает, что указанный элемент всегда находится в нескольких шагах от изменений и браузер будет сохранять для него оптимизацию гораздо больше времени. Так что, было бы хорошо включать и отключать <code>will-change</code> используя скрипт до и после того как произошли изменения.</p>
</li>
<li>
<p><em>Не применяйте will-change к элементам для выполнения преждевременной оптимизации</em>. Если ваша страница хорошо отрабатывается, не применяйте <code>will-change</code> свойство к элементу только чтобы выжать немного больше скорости. <code>will-change</code> предназначен для использования в крайнем случае, для того чтобы исправить существующие проблемы оптимизации. Его не следует использовать для предвидения проблем оптимизации. Чрезмерное использование <code>will-change</code> приведёт к излишнему потреблению памяти и вызовет более тяжёлый рендеринг так как браузер будет пытаться подготовиться к возможным изменениям. Это приведёт к ухудшению производительности.</p>
</li>
<li>
<p id="Give_it_sufficient_time_to_work"><em>Дайте ему достаточно времени, чтобы работать</em>. Это свойство даёт автору способ указать пользовательскому агенту свойства, которые могут измениться в будущем. Затем браузер может применить любые предварительные оптимизации, необходимые для изменения свойств до того, когда эти свойства изменятся. Поэтому важно дать браузеру некоторое время, чтобы провести оптимизацию. Найдите способ предсказать изменение хотя бы немного заранее, что-то изменится, и затем установите изменение.</p>
</li>
</ul>
<p>{{cssinfo}}</p>
<h2 id="Синтаксис">Синтаксис</h2>
<h3 id="Значения">Значения</h3>
<dl>
<dt><code>auto</code></dt>
<dd>Это ключевое слово не выражает конкретной цели; пользовательский агент должен применяться независимо эвристики и оптимизации как он это обычно делает.</dd>
</dl>
<p><Animateable-feature> может иметь одно из следующих значений:</p>
<dl>
<dt><code>scroll-position</code></dt>
<dd>Указывает, что автор ожидает анимацию или изменение положения скролла элемента в ближайшем будущем.</dd>
<dt><code>contents</code></dt>
<dd>Указывает, что автор ожидает анимацию или изменение чего то в контенте элемента в ближайшем будущем.</dd>
<dt>{{cssxref("custom-ident", "<custom-ident>")}}</dt>
<dd>Указывает, что автор ожидает анимацию или изменить свойства с заданным именем в элементе в ближайшем будущем . Если заданное свойство-это сокращённая запись, тогда оно указывает на все полные записи свойств, на которые указывает сокращённая запись. Это не может быть одним из следующих значений: <code>unset</code>, <code>initial</code>, <code>inherit</code>, <code>will-change</code>, <code>auto</code>, <code>scroll-position</code>, или <code>contents</code>. </dd>
</dl>
<h2 id="Примеры">Примеры</h2>
<pre class="brush: css">.sidebar {
will-change: transform;
}
</pre>
<p>В примере выше прямо в таблицу стилей добавляется свойство <code>will-change</code>, которое заставит браузер держать оптимизацию в памяти намного дольше, чем нужно, а мы уже видели почему следует этого избегать. Ниже приведён ещё один пример, показывающий, как применить свойство <code>will-change</code> с помощью скриптов, что вероятно, вам следует делать в большинстве случаев.</p>
<pre class="brush: js">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';
}</pre>
<p>Однако может быть целесообразно включить will-change в вашу таблицу стилей для приложения, в котором страница переворачивается при нажатии клавиши, например альбом или презентация, где страницы большие и сложные. Это позволит браузеру заранее подготовить переход и позволит быстро переключаться между страницами, как только будет нажата клавиша.</p>
<pre class="brush: css">.slide {
will-change: transform;
}</pre>
<h2 id="Спецификация">Спецификация</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Specification</th>
<th scope="col">Status</th>
<th scope="col">Comment</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{ SpecName('CSS Will Change', '#will-change', 'will-change') }}</td>
<td>{{ Spec2('CSS Will Change') }}</td>
<td>Initial definition</td>
</tr>
</tbody>
</table>
<h2 id="Браузерная_совместимость">Браузерная совместимость</h2>
<p>{{Compat("css.properties.will-change")}}</p>
<div id="compat-desktop">
<table class="compat-table">
<tbody>
<tr>
<th>Feature</th>
<th>Chrome</th>
<th>Firefox (Gecko)</th>
<th>Internet Explorer</th>
<th>Opera</th>
<th>Safari (WebKit)</th>
</tr>
<tr>
<td>Basic support</td>
<td>{{CompatChrome(36)}}</td>
<td>{{CompatGeckoDesktop(36)}} [1]</td>
<td>{{CompatNo}}</td>
<td>{{CompatOpera(24)}}</td>
<td>{{CompatNo}}</td>
</tr>
</tbody>
</table>
</div>
<div id="compat-mobile">
<table class="compat-table">
<tbody>
<tr>
<th>Feature</th>
<th>Android</th>
<th>Firefox Mobile (Gecko)</th>
<th>IE Phone</th>
<th>Opera Mobile</th>
<th>Safari Mobile</th>
</tr>
<tr>
<td>Basic support</td>
<td>37</td>
<td>{{CompatGeckoMobile(36)}} [1]</td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}</td>
</tr>
</tbody>
</table>
</div>
<p>[1] В Firefox с 31 до 35 версии свойство <code>will-change</code> было доступно, но только, если пользователь установил значение флага <code style="font-style: normal; line-height: 1.5;">layout.css.will-change.enabled</code> в <code>true</code>. Выбор был удалён в Firefox 43.</p>
<p>Firefox позволяет установить <code>will-change: will-change</code> до версии 42.0, что не соответствует спецификации. Это было исправлено в Firefox 43.0. Смотрите {{bug("1195884")}}.</p>
|
