will-change
CSS
property hints to browsers how an element is expected to change. Browsers may set up optimizations before an element is actually changed.
These kinds of optimizations can increase the responsiveness of a page by doing potentially expensive work before they are actually required.
Important:
will-change
is intended to be used as a last resort, in order to try to deal with existing performance problems. It should not be used to anticipate performance problems.
/* 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;
Proper usage of this property can be a bit tricky:
Don't apply will-change to too many elements.
The browser already tries as hard as it can to optimize everything. Some of the stronger optimizations that are likely to be tied to
will-change
end up using a lot of a machine’s resources, and when overused like this can cause the page to slow down or consume a lot of resources.
Use sparingly.
The normal behavior for optimizations that the browser make is to remove the optimizations as soon as it can and revert back to normal. But adding
will-change
directly in a stylesheet implies that the targeted elements are always a few moments away from changing and the browser will keep the optimizations for much longer time than it would have otherwise. So it is a good practice to switch
will-change
on and off using script code before and after the change occurs.
Don't apply will-change to elements to perform premature optimization
. If your page is performing well, don't add the
will-change
property to elements just to wring out a little more speed.
will-change
is intended to be used as something of a last resort, in order to try to deal with existing performance problems. It should not be used to anticipate performance problems. Excessive use of
will-change
will result in excessive memory use and will cause more complex rendering to occur as the browser attempts to prepare for the possible change. This will lead to worse performance.
Give it sufficient time to work
. This property is intended as a method for authors to let the user-agent know about properties that are likely to change ahead of time. Then the browser can choose to apply any ahead-of-time optimizations required for the property change before the property change actually happens. So it is important to give the browser some time to actually do the optimizations. Find some way to predict at least slightly ahead of time that something will change, and set
will-change
then.
Be aware, that will-change may actually influence the visual appearance of elements , when used with property values, that create a stacking context (e.g. will-change: opacity), as the stacking context is created up front.
auto
This keyword expresses no particular intent; the user agent should apply whatever heuristics and optimizations it normally does.
<animateable-feature>
can be one of the following values:
scroll-position
Indicates that the author expects to animate or change the scroll position of the element in the near future.
contents
Indicates that the author expects to animate or change something about the element’s contents in the near future.
<custom-ident>
unset
,
initial
,
inherit
,
will-change
,
auto
,
scroll-position
，或
contents
. The spec doesn't define the behavior of particular value, but it is common for
transform
to be a compositing layer hint.
Chrome currently takes two actions
, given particular CSS property idents: establish a new compositing layer or a new
stacking context
.
It may 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. But use caution with the
will-change
property directly in stylesheets. It may cause the browser to keep the optimization in memory for much longer than it is needed.
.slide {
will-change: transform;
}
| 初始值 |
auto
|
|---|---|
| 适用于 | 所有元素 |
| 继承 | no |
| 计算值 | 如指定 |
| 动画类型 | discrete |
auto | <animateable-feature>#where
<animateable-feature> = scroll-position | contents | <custom-ident>
This is an 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';
}
| 规范 | 状态 | 注释 |
|---|---|---|
|
CSS Will Change Module Level 1
The definition of 'will-change' in that specification. |
候选推荐 | 初始定义 |
| Desktop | Mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
will-change
|
Chrome 完整支持 36 | Edge 完整支持 79 |
Firefox
完整支持
36
注意事项
|
IE 不支持 No | Opera 完整支持 24 | Safari 完整支持 9.1 | WebView Android 完整支持 37 | Chrome Android 完整支持 36 |
Firefox Android
完整支持
36
注意事项
|
Opera Android 完整支持 24 | Safari iOS 完整支持 9.3 | Samsung Internet Android 完整支持 3.0 |
完整支持
不支持
见实现注意事项。
用户必须明确启用此特征。
<custom-ident>
will-change