CSS `will-change` 属性：提前通知浏览器动画意图，优化渲染性能

各位看官，大家好！我是今天的主讲人，接下来咱们就聊聊CSS will-change 这个“小妖精”属性，看看它如何帮我们优化渲染性能，让页面飞起来！

开场白：别让浏览器猜你的心思！

话说，浏览器这玩意儿，虽然聪明，但有时候也挺笨的。它需要我们明确告诉它，接下来要做什么，才能更好地优化渲染。就像你跟朋友约会，你得告诉他想吃火锅还是烧烤，他才能提前预定，不是吗？will-change 就是你告诉浏览器“我要搞事情”的秘密武器！

will-change 是什么？

will-change 属性允许你提前告知浏览器，页面中的某个元素可能会发生哪些变化，比如位置、大小、内容等等。这样，浏览器就可以提前做好优化准备，避免在动画发生时出现卡顿。

will-change 的语法

will-change 属性的值可以是以下几种：

auto: 这是默认值，浏览器会自己决定是否进行优化。
scroll-position: 表明元素的内容可能会滚动。
contents: 表明元素的内容可能会改变。
transform: 表明元素可能会进行 2D 或 3D 转换。
opacity: 表明元素的不透明度可能会改变。
top, left, bottom, right: 表明元素的位置可能会改变。
width, height: 表明元素的尺寸可能会改变。
custom-ident: 自定义属性名，比如 will-change: my-custom-property。
inherit: 从父元素继承 will-change 属性。
initial: 将 will-change 属性设置为其默认值（auto）。
unset: 移除元素的 will-change 属性，如果该属性继承自父元素，则继续继承，否则设置为初始值。

will-change 的使用场景

动画效果： 这是 will-change 最常见的应用场景。如果你要对某个元素应用动画效果，比如 transform、opacity 等，可以提前使用 will-change 告诉浏览器，让它做好优化准备。
滚动： 如果你的页面有大量的滚动内容，可以使用 will-change: scroll-position 来优化滚动性能。
内容更新： 如果某个元素的内容会频繁更新，可以使用 will-change: contents 来优化性能。

will-change 的代码示例

/* 告诉浏览器，这个元素可能会进行 2D 转换 */
.element {
  will-change: transform;
}

/* 告诉浏览器，这个元素的不透明度可能会改变 */
.element {
  will-change: opacity;
}

/* 告诉浏览器，这个元素的位置可能会改变 */
.element {
  will-change: top, left;
}

/* 告诉浏览器，这个元素的内容可能会改变 */
.element {
  will-change: contents;
}

/* 告诉浏览器，这个元素可能会滚动 */
.scrollable-element {
  will-change: scroll-position;
}

will-change 的注意事项

不要滥用 will-change： will-change 会占用一定的资源，如果滥用，反而会降低性能。只在需要优化的元素上使用 will-change。
will-change 不是万能的： will-change 只能帮助浏览器进行优化，并不能解决所有性能问题。如果你的页面性能问题很严重，还需要从其他方面入手，比如优化代码、减少 HTTP 请求等。
will-change 会创建新的 stacking context： 这可能会影响元素的层叠顺序，需要注意。
will-change 会阻止某些优化： 在某些情况下，will-change 可能会阻止浏览器进行某些优化，比如文本渲染优化。
用完 will-change 要记得重置： 在动画结束后，最好将 will-change 设置为 auto，释放资源。

will-change 的最佳实践

只在动画开始前设置 will-change，动画结束后移除。 可以使用 JavaScript 来动态添加和移除 will-change 属性。

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

element.addEventListener('mouseenter', () => {
  element.style.willChange = 'transform';
});

element.addEventListener('mouseleave', () => {
  element.style.willChange = 'auto';
});

使用 transition 或 animation 配合 will-change。 will-change 只是提前告知浏览器，真正的动画效果还需要使用 transition 或 animation 来实现。

.element {
  transition: transform 0.3s ease-in-out;
}

.element:hover {
  will-change: transform; /* 提前告知浏览器 */
  transform: translateX(100px);
}

避免使用 will-change: all。 这会让浏览器对所有属性进行优化，可能会导致性能下降。
使用 Chrome DevTools 的 Layers 面板来调试 will-change。 Layers 面板可以让你看到浏览器是如何渲染页面的，以及 will-change 对渲染的影响。

will-change 与硬件加速

will-change 通常与硬件加速相关联。当你使用 will-change 告诉浏览器某个元素可能会发生变化时，浏览器可能会将该元素移动到 GPU 上进行渲染。GPU 的渲染性能通常比 CPU 高，因此可以提高动画的流畅度。

案例分析：旋转的方块

我们来做一个简单的例子，一个旋转的方块，看看 will-change 如何优化性能。

HTML:

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

CSS (没有 will-change):

.box {
  width: 100px;
  height: 100px;
  background-color: red;
  animation: rotate 2s linear infinite;
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

在这种情况下，浏览器可能会在 CPU 上进行渲染，导致动画出现卡顿。

CSS (使用 will-change):

.box {
  width: 100px;
  height: 100px;
  background-color: red;
  will-change: transform; /* 提前告知浏览器 */
  animation: rotate 2s linear infinite;
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

在这种情况下，浏览器可能会将方块移动到 GPU 上进行渲染，提高动画的流畅度。

will-change 的兼容性

will-change 属性的兼容性还是不错的，主流浏览器都支持。

浏览器	支持版本
Chrome	36+
Firefox	36+
Safari	9+
Edge	12+
Opera	23+
Internet Explorer	不支持

will-change 的替代方案

如果你的目标浏览器不支持 will-change，可以考虑使用以下替代方案：

transform: translateZ(0) 或 backface-visibility: hidden： 这些属性也可以触发硬件加速，但可能会导致一些副作用。
使用 JavaScript 来手动控制动画。 这需要更多的代码，但可以更精确地控制动画的性能。

will-change 的误区

will-change 可以解决所有性能问题。 这是错误的。will-change 只是一个优化工具，并不能解决所有性能问题。如果你的页面性能问题很严重，还需要从其他方面入手。
will-change 可以提高所有动画的性能。 这也是错误的。will-change 只对某些类型的动画有效，比如 transform、opacity 等。对于其他类型的动画，will-change 可能没有效果，甚至会降低性能。
will-change 越早设置越好。 这也是错误的。will-change 会占用一定的资源，如果过早设置，反而会降低性能。最好只在动画开始前设置 will-change，动画结束后移除。

高级话题：will-change 与 compositing

will-change 经常与 compositing 概念联系在一起。Compositing 是浏览器将多个图层合并成最终图像的过程。当浏览器需要频繁地重新 compositing 时，会影响性能。will-change 可以帮助浏览器更好地管理图层，减少 compositing 的次数，从而提高性能。

当浏览器检测到元素使用了 will-change 并且声明了会改变的属性，它可能会将该元素提升到自己的 compositing layer。这意味着该元素会在单独的层中渲染，并且只有在该层发生变化时才会重新渲染。这可以避免整个页面都需要重新渲染，从而提高性能。

总结：will-change 的正确打开方式

will-change 是一个强大的性能优化工具，但需要谨慎使用。

了解 will-change 的原理和作用。
只在需要优化的元素上使用 will-change。
避免滥用 will-change。
用完 will-change 要记得重置。
使用 Chrome DevTools 的 Layers 面板来调试 will-change。

will-change 属性速查表

属性值	描述
`auto`	浏览器自行决定是否进行优化，这是默认值。
`scroll-position`	表明元素的内容可能会滚动，用于优化滚动性能。
`contents`	表明元素的内容可能会改变，用于优化内容更新。
`transform`	表明元素可能会进行 2D 或 3D 转换，用于优化动画效果。
`opacity`	表明元素的不透明度可能会改变，用于优化动画效果。
`top`, `left`, `bottom`, `right`	表明元素的位置可能会改变，用于优化动画效果。
`width`, `height`	表明元素的尺寸可能会改变，用于优化动画效果。
`custom-ident`	自定义属性名，比如 `will-change: my-custom-property`，通常用于高级用法。
`inherit`	从父元素继承 `will-change` 属性。
`initial`	将 `will-change` 属性设置为其默认值（`auto`）。
`unset`	移除元素的 `will-change` 属性，如果该属性继承自父元素，则继续继承，否则设置为初始值。

结束语：祝你页面飞起来！

好了，关于 will-change 的介绍就到这里了。希望大家能够正确使用 will-change，优化页面性能，让你的页面飞起来！如果有任何疑问，欢迎随时提问。感谢大家的观看！

发表回复 取消回复

发表回复取消回复