语法
will-change: auto | scroll-position | contents | <custom-ident> | initial | inherit;
will-change 属性的示例：
<!DOCTYPE html>
<html>
<head>
<title>The 文档的标题</title>
<style>
.circle {
width: 50px;
height: 50px;
transform: translate(50px, 0px);
border-radius: 30px;
}
.circle.blue {
background: #1c87c9;
will-change: transform;
}
.circle.green {
background: #8ebf42;
}
</style>
</head>
<body>
<h2>Will-change 属性示例</h2>
<div class="circle green"></div>
<div class="circle blue"></div>
<div class="circle green"></div>
<div class="circle blue"></div>
<div class="circle green"></div>
<script>
var circles = document.getElementsByClassName("circle blue");
function update(t) {
for (var i = 0; i < circles.length; i++) {
var xpos = Math.sin(t/1000 + 1000 * i) * 50 + 50;
circles[i].style.transform = "translate(" + xpos + "px, 0px)";
}
window.requestAnimationFrame(update);
}
update();
</script>
</body>
</html>
will-change 属性向浏览器提示了一个元素在不久的将来会如何变化。
应在更改元素之前设置优化。
will-change 属性最初被命名为 will-animate。
will-change 属性允许浏览器更改元素的滚动位置、内容或者多个 CSS 属性值。
但是，许多属性不会产生任何影响。
这些值必须以逗号分隔。
will-change 属性可以具有以下值：unset、initial、inherit、will-change、auto、scroll-position 或者 contents。
应谨慎使用此属性。
不同的浏览器以不同的方式使用此属性，过度使用它可能会忽略该属性。
CSS will-change 属性值说明
| 值 | 描述 |
|---|---|
| auto | 应应用标准浏览器优化。 |
| scroll-position | 指定元素的滚动位置将来会有动画。 |
| contents | 指定元素的内容将来会有动画。 |
| <custom-ident> | 预计将在近期在元素上使用给定的名称更改或者动画属性。如果属性缩写，则更改将扩展到所有的始终属性。 |
| initial | 使属性使用其默认值。 |
| inherit | 从父母元素继承属性。 |
will-change 属性的正确使用：
- will-change 属性不应应用于太多元素。它的过度使用会减慢页面加载速度。在这种情况下，会消耗大量资源。
- 使用 will-change 属性时，最好在更改发生之前和之后使用脚本代码。
- will-change 属性不应应用于元素以进行过早的优化。如果页面表现良好，则无需向元素添加 will-change。预计此属性将用作处理现有性能问题的最后一个选项。
- 应该给浏览器一些时间进行优化。 will-change 属性旨在通知预期会提前更改的属性。
- 当 will-change 属性与创建堆叠上下文的值一起使用时，它会影响元素的视觉显示。
| 初始值 | auto |
|---|---|
| 应用于 | 所有元素。 |
| 继承 | 无效 |
| 可动画的 | 无效 |
| 版本 | CSS1 |
| DOM 语法 | object.Style.WillChange = "scroll-position"; |
日期：2020-06-02 22:14:52 来源：oir作者：oir