css will-change

will-change 是一个用于通知浏览器某个元素即将发生变化的 CSS 属性。它可以被应用到任何元素上，用于提前告知浏览器该元素将要有哪些属性进行改变，从而优化渲染性能。

通过在元素上设置 will-change 属性，开发者可以明确指示浏览器对该元素进行优化处理。这样一来，浏览器可以提前分配资源和准备工作，以便在实际改变发生之前进行相应的合成操作。这样做有助于避免不必要的重绘和重排，提高页面的响应速度和动画的流畅度。

will-change 属性可以接受多个属性值，表示将要改变的属性。例如：

.element {
  will-change: transform, opacity;
}

在上述例子中，我们告诉浏览器该元素将要发生的变化是 transform 和 opacity 属性。浏览器会根据这个信息进行相应的预处理，并为元素分配更高效的渲染方式，如创建一个独立的图层或使用 GPU 加速等。

尽管 will-change 属性可以带来性能优化，但滥用它可能会导致负面影响。因为过多地使用 will-change 可能会导致浏览器过度优化，导致资源的浪费。因此，应仅在确实需要进行频繁改变的元素上使用 will-change，以避免不必要的复杂性和性能问题。

总结起来，will-change 是一个用于告知浏览器某个元素即将发生变化的 CSS 属性，它可以帮助优化渲染性能，提高页面的响应速度和动画的流畅度。

具体优化方式

创建独立的图层（Layer Creation）：当使用 will-change 属性时，浏览器可能会将该元素提升到一个单独的图层中。这个图层可以被 GPU 加速处理，减少主线程的工作负载。这样可以使元素在动画或变换过程中更加流畅。

启用硬件加速（Hardware Acceleration）：will-change 属性可以提示浏览器使用 GPU 来处理元素的变化。GPU 可以高效地执行图形操作，例如移动、缩放和淡入淡出等变换。这样可以加快渲染速度，提高性能。

预先计算布局（Pre-compositing）：浏览器可以在元素实际发生改变之前提前计算布局信息。这样可以避免重排和重绘操作，减少页面布局的成本和延迟。

提早分配资源（Resource Allocation）：根据 will-change 属性的指示，浏览器可以提前为元素分配必要的资源，以便在需要时能够更高效地处理元素的变化。这包括图像、字体等资源的加载和解码。