1. 语法:
will-change: auto | <animateable-feature>
其中<animateable-feature> = scroll-position | contents | <custom-ident>
auto
:默认,不优化
scroll-position
:优化滚动效果
contents
:优化内容的改变
<custom-ident>
:优化给定名字的属性值变化
如果指定的属性名是缩写,就优化完整形式的所有属性
该名字不能是这些值,unset
, initial
, inherit
, will-change
, auto
, scroll-position
, contents
规范中并没有指定特定值的行为
2. Chrome的实现如下:(截止到2015.8.17)
(1)will-change values that trigger a compositing layer in Chrome:
opacity
transform, -webkit-transform
top, left, bottom, right
source: ComputedStyle::hasWillChangeCompositingHint()
(2)will-change values that trigger a stacking context in chrome
opacity
transform, -webkit-transform
transform-style, -webkit-transform-style
perspective, -webkit-perspective
-webkit-mask, -webkit-mask-box-image, -webkit-clip-path, -webkit-box-reflect, -webkit-filter
z-index
position
source: hasWillChangeThatCreatesStackingContext
(3)also
scroll-position
does nothing in Chrome currently.
contents
appears to be a compositing layer hint for whatever children are being changed.
3. 参考:
https://developer.mozilla.org/en-US/docs/Web/CSS/will-change
https://github.com/operasoftware/devopera/pull/330