CSS `will-change` `auto` 值的潜在陷阱与正确使用时机 - 智猿学院-前后端，数据库，人工智能，云计算等领域前沿技术讲座

嘿，大家好！今天咱们来聊聊 CSS 界的“薛定谔的猫”—— will-change: auto。听起来很玄乎，但其实它是个挺有意思的东西。咱们一起看看它到底是个宝贝还是个坑。

开场：will-change 的前世今生

首先，咱们得知道 will-change 这家伙是干嘛的。简单来说，它就是个“剧透器”，告诉浏览器：“嘿，老兄，这个元素待会可能会发生一些变化，你提前准备准备。” 浏览器一听，就屁颠屁颠地去优化了。

但是！重点来了，will-change 这玩意儿，用好了是神助攻，用不好那就是猪队友。特别是 will-change: auto，更是个让人又爱又恨的主儿。

will-change: auto 的真面目

will-change: auto 的本意是：“浏览器老弟，你看着办，觉得这个元素待会可能要变，你就优化优化，觉得没啥变化，就别瞎折腾。”

听起来很智能，对不对？但问题就出在这个“你看着办”上。浏览器也是个程序，它又不是你肚子里的蛔虫，怎么知道你到底要干啥？它只能根据一些（可能并不靠谱的）猜测来决定是否优化。

这就导致了 will-change: auto 的行为非常难以预测。有时候它会起到一些优化作用，有时候反而会适得其反，让你的页面变得更卡。

will-change: auto 的潜在陷阱

过度优化：

浏览器可能会过度猜测，对一些实际上不会发生变化的元素进行优化。这种优化不仅浪费资源，还可能导致一些副作用。比如，强制创建一个新的合成层（compositing layer），这会增加内存消耗，并可能导致闪烁。
```
.my-element {
  will-change: auto; /* 可能会导致过度优化 */
}
```
性能下降：

will-change 的优化是需要成本的。如果浏览器频繁地进行优化和反优化，反而会降低性能。 will-change: auto 增加了这种频繁优化的可能性，特别是当元素的行为比较复杂或者不可预测时。
难以调试：

will-change: auto 的行为是不确定的，这使得调试变得非常困难。你可能很难确定页面卡顿的原因到底是不是 will-change: auto 引起的。
```
<div class="container">
  <div class="my-element">内容</div>
</div>

<style>
.container {
  /* 模拟一些复杂的样式 */
  transform: translateZ(0); /* 创建新的层叠上下文 */
  perspective: 1000px;
}

.my-element {
  will-change: auto; /* 难以预测的行为 */
}
</style>
```
在这个例子中，.container 的 transform: translateZ(0) 创建了一个新的层叠上下文，这可能会影响 will-change: auto 的行为。你需要仔细检查浏览器的渲染管线，才能确定 will-change: auto 是否真的起到了优化作用。
浏览器差异：

不同浏览器的优化策略是不同的，will-change: auto 在不同浏览器上的表现可能会有差异。这增加了跨浏览器兼容性的难度。

will-change: auto 的正确使用时机

既然 will-change: auto 有这么多坑，那它是不是就一无是处了呢？当然不是。在某些特定的情况下，will-change: auto 还是可以派上用场的。

元素行为复杂且难以预测：

如果你的元素行为非常复杂，难以用具体的 will-change 属性来描述，那么 will-change: auto 可能是个选择。比如，一个元素同时受到多种 CSS 属性的影响，并且这些属性的变化是动态的。
```
.complex-element {
  /* 复杂的样式和动画 */
  transition: all 0.5s ease-in-out;
  /* ... */
  will-change: auto; /* 难以预测的变化 */
}
```
注意： 在这种情况下，你仍然需要仔细测试，确保 will-change: auto 确实起到了优化作用，而不是适得其反。
作为最后的手段：

如果你已经尝试了其他优化方法，但仍然无法解决性能问题，那么可以考虑使用 will-change: auto。但一定要把它作为最后的手段，并且要做好充分的测试。
结合性能分析工具：

在使用 will-change: auto 之前，一定要使用浏览器的性能分析工具（比如 Chrome DevTools）来分析页面的性能瓶颈。只有确定了瓶颈所在，才能有针对性地使用 will-change: auto。

更好的选择：明确指定 will-change 属性

总的来说，will-change: auto 并不是一个好的选择。在大多数情况下，明确指定 will-change 属性会更好。

`will-change` 属性	适用场景
`transform`	元素将要发生平移、旋转、缩放等变换。比如，鼠标悬停时元素的旋转动画。
`opacity`	元素的不透明度将要发生变化。比如，淡入淡出效果。
`top`, `left`, `bottom`, `right`	元素的位置将要发生变化。比如，绝对定位元素的移动动画。
`scroll-position`	元素的滚动位置将要发生变化。比如，滚动视差效果。
`contents`	元素的子元素将要发生变化。谨慎使用，可能会导致较大的性能开销。

代码示例：明确指定 will-change 属性

<div class="box"></div>

<style>
.box {
  width: 100px;
  height: 100px;
  background-color: red;
  transition: transform 0.5s ease-in-out;
}

.box:hover {
  transform: rotate(45deg);
}

/* 明确指定 will-change: transform */
.box {
  will-change: transform;
}
</style>

在这个例子中，我们明确告诉浏览器，.box 元素将要发生 transform 变化。这样，浏览器就可以更有针对性地进行优化，避免过度优化或者优化不足的情况。

最佳实践：will-change 的正确使用姿势

不要滥用 will-change： 只有在必要的时候才使用 will-change。过多的 will-change 声明反而会降低性能。
明确指定 will-change 属性： 尽量避免使用 will-change: auto，而是明确指定将要发生变化的属性。
在元素将要发生变化之前设置 will-change： 提前告诉浏览器，而不是在变化发生时才设置 will-change。

移除不再需要的 will-change： 当元素不再需要优化时，及时移除 will-change 声明。可以通过 JavaScript 来动态添加和移除 will-change 属性。

const box = document.querySelector('.box');

box.addEventListener('mouseenter', () => {
  box.style.willChange = 'transform'; // 鼠标移入时添加 will-change
});

box.addEventListener('mouseleave', () => {
  box.style.willChange = 'auto'; // 鼠标移出时移除 will-change
});

使用性能分析工具进行测试： 使用浏览器的性能分析工具来验证 will-change 是否真的起到了优化作用。

will-change 的替代方案

如果 will-change 让你感到困惑，或者无法达到预期的效果，可以考虑使用其他的优化方法。

使用 transform: translateZ(0) 或 backface-visibility: hidden 创建新的合成层： 这可以强制浏览器创建一个新的合成层，从而提高渲染性能。但要注意，过度使用合成层也会导致性能问题。
使用 requestAnimationFrame： 将动画逻辑放在 requestAnimationFrame 回调函数中，可以确保动画在每一帧都运行，从而提高动画的流畅度。
优化 CSS 选择器： 复杂的 CSS 选择器会降低渲染性能。尽量使用简单的 CSS 选择器，避免过度嵌套。
减少 DOM 操作： 频繁的 DOM 操作会触发浏览器的重绘和重排，从而降低性能。尽量减少 DOM 操作，或者使用文档片段（DocumentFragment）来批量更新 DOM。

总结：will-change: auto，谨慎使用

will-change: auto 就像一把双刃剑，用好了可以提高性能，用不好反而会适得其反。在大多数情况下，明确指定 will-change 属性会更好。记住，优化是一个迭代的过程，需要不断地测试和调整。

希望今天的讲座对大家有所帮助！记住，代码的世界没有银弹，只有不断学习和实践，才能写出高效、优雅的代码。

补充说明：

will-change 属性并不能解决所有性能问题。它只是一个提示，告诉浏览器可以进行哪些优化。最终的优化效果取决于浏览器的实现。
will-change 属性可能会导致一些副作用，比如增加内存消耗和导致闪烁。因此，在使用 will-change 属性时，一定要进行充分的测试。
will-change 属性是一个相对高级的 CSS 属性，需要对浏览器的渲染管线有一定的了解才能正确使用。

好了，今天的分享就到这里。祝大家编码愉快！

发表回复 取消回复

发表回复取消回复