前端性能优化之 CSS will-change

2023-11-06 00:11:34

CSS 中的 will-change 属性：优化页面渲染性能

在现代 Web 开发中，确保网站和应用程序的性能至关重要。页面渲染优化是提升性能的关键方面之一，而 CSS 属性 will-change 正是帮助我们实现这一目标的强大工具。

想象一下，你在玩一场电子游戏，突然屏幕上出现了一个巨大的敌人。这款游戏已经提前知道了这个敌人将会出现，并提前做好了准备，从而快速渲染出敌人，让你能够立即做出反应。这就是 will-change 的工作原理。

will-change 允许我们告知浏览器某些元素的特定属性在不久的将来将发生变化。就像游戏中的敌人一样，浏览器可以提前对这些属性进行优化，减少元素实际改变时所需的计算量。

当浏览器遇到 will-change 声明时，它会执行一些优化措施：

隔离渲染层： 浏览器将应用 will-change 的元素分配到一个单独的渲染层，就像在一个隔离的房间中一样。这有助于隔离元素的更改，防止它们影响其他元素的渲染，就像在游戏中将敌人与其他角色分开一样。
提前计算布局： 浏览器会在元素更改实际发生之前提前计算其布局。这样，当更改触发时，浏览器可以立即重新渲染元素，而无需进行任何额外的计算，就像游戏在敌人出现之前就知道了它的位置一样。
禁用硬件加速： 对于某些类型的更改（例如位置更改），浏览器可能会禁用硬件加速以确保准确性。就像在游戏中将某些动作限制在软件层中以确保精确性一样。

will-change 最适合以下情况：

使用 will-change 就像在游戏中提醒计算机某样东西即将发生一样。只需添加 will-change 属性到 CSS 规则并指定要优化的属性即可。例如：

.animated-element {
  will-change: transform;
}

这将指示浏览器为 .animated-element 预先优化 transform 属性，因为它将在未来发生改变。

使用 will-change 就如同在游戏中提前做好准备，可以带来以下好处：

减少重新渲染时间： 通过提前计算布局和隔离渲染层，will-change 可以显著减少元素重新渲染所需的时间。就像游戏中的敌人已经准备好，无需重新加载一样。
提高帧率： 减少重新渲染时间有助于提高帧率，就像在游戏中获得更高的帧率，带来更流畅的体验。
防止掉帧： 通过隔离元素更改，will-change 可以防止掉帧，就像在游戏中避免突然的卡顿一样。