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