CSS 不会改变

CSS will-not-change

有一个新的CSS属性,叫做will-change,使用你可以定义经常改变的属性,所以浏览器可以优化它。例如:

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

但是反过来呢?对于 will-not-change 之类的内容,是否有任何建议或工作草案?使用它可以提示浏览器,该属性永远不会改变(常量),因此它可以对其进行一些优化?

浏览器已经针对默认情况下 "will not change" 的属性优化了布局算法。 will-change 是一种选择属性的方法,因为 可能会 发生变化(尽管 属性 名称中的 "will" 可能暗示什么),因此浏览器可以执行当这些属性 do 发生变化(至少从它们的初始值开始)时,预先进行必要的优化。

这样想:未在 will-change 中列出的属性已经优化为 "will not change",或 "whether they change or not makes no meaningful difference in performance."

例如,您的 will-change 声明告诉浏览器为 .element 元素创建合成层,以防它们需要转换或 alpha 合成,以便它们的渲染是硬件的从一开始就加速。由于这个 will-change 声明不适用于没有这个 class 的元素,浏览器假定那些其他元素永远不会被转换或 alpha 合成,因此不需要这个合成层。通过不为它们创建合成层,浏览器已经优化了这些元素的渲染,不会对它们进行不必要的硬件加速。