问题标签 [will-change]

我发现了一篇关于CSS 中属性的有趣文章will-change（它允许预先告诉浏览器什么会发生变化并主动做出反应）。这个属性背后的主要原因是为了提高性能。

据我了解，我可以通过以下方式使用它：jsFiddle（点击方块）

到目前为止一切都很好，但是为了谈论性能的改进，应该有一种方法来衡量这种改进。

那么有没有办法在有和没有的情况下测量性能、CPU/GPU 利用率will-change？

在撰写本文时，只有 Chrome Canary 36+、Opera Developer 23+ 和 Firefox Nightly 支持 will-change 属性。也有将其发送到稳定频道的意图。

我找到了 CSS will-change^{W3.org docs、MDN docs}属性（它已经在 Chrome 中运行，并且部分支持 Firefox 和 Opera），但我不确定它是如何工作的。有人对这个神秘的东西了解更多吗？

我刚刚读到它允许浏览器为将来计算元素做准备。我不想误解它。所以我有几个问题。

1. 我应该将此属性添加到元素类还是它的悬停状态？

   或者

   /li>

2. 它如何提高浏览器的性能？理论上，当 CSS 被加载时，浏览器已经“知道”每个元素会发生什么，不是吗？

如果您可以添加任何说明如何有效使用它的好示例，我将不胜感激:)

看看这个CodePen看看我的意思：

我有一个应用了透视的旋转元素，在其中我有一个垂直转换的“滚动”div（想象一下杂志翻页体验，每个页面内都有滚动 div）。我添加will-change: transform到内部 div 并破坏了外部容器overflow: hidden。这似乎是 Chrome 合成器的一个错误。

有谁知道任何解决方法？我想保留该will-change属性，因为它显着加快了移动 Chrome 上的动画速度。

编辑：看起来这不是特定于 will-change 属性，而是任何使内部 div 成为自己的合成层的属性。当我删除该will-change属性但将转换更改为translate3d类似提高性能并显示错误的 a 时。内部 div 上唯一允许旋转的父对象正确渲染overflow: hidden的类是添加 2D 变换的类。

所以我在使用 MaterializeCSS 并意识到当在类中放置一个按钮时会"waves-effect"导致所有文本变得平滑并变得有点模糊。所以通过排除的过程，我发现will-change: opacity, transform;导致这种情况发生。

这就是区别：http: //imgur.com/a/3j1hm

任何人都知道如何或是什么导致这种效果发生？

谢谢。

“清除” will-changeCSS 属性的正确值是多少？我尝试使用'auto'，但根据 Chrome 开发工具（在当前版本的 Chrome (46) 和 Canary (48) 中），这是一个无效的属性值。

我正在尝试使用will-change使动画表现更好。我有一个页面容器，可以设置动画left并padding-right移动和显示侧边菜单。

单击按钮移动容器/显示菜单时，将一个类添加到容器父级，并将 css 更改为：

will-change似乎没有任何影响。我是否正确使用它，或者应该如何使用它？

由于这个 CSS 规则，我有两个 DOM 元素存在于它们自己的复合层上：

现在，我可以使用 Chrome 开发工具的显示图层边框选项检查这些图层。

都很棒！这就是我所看到的

我熟悉橙色边框颜色，这意味着元素存在于自己的复合层上。但是绿色代表什么？

所有开发工具文档似乎都已过时。

我有一个动画和 JS 用于交替 2 个 div 并更改它们的背景图像（来自几十个图像的数组），有点可互换的 div。一切正常，但是当动画运行时，我可以看到我的 CPU 是 100%。起初我认为这可能是由于 setInterval，但是当我将代码从交替图像更改为每次迭代增加一个数字并将其记录到控制台时 - 我看到 CPU 过载显着减少，大约 40-50%。所以我知道这可能是由于动画。

这是我的 HTML 代码：

CSS：

和 JS 让一切都打勾：

任何想法如何减少 CPU 过载？

在 html视频标签上使用will-change属性来提高性能有什么好处吗？

如果是这样，我应该如何使用它来使用硬件加速使视频在 GPU 上运行？

我注意到当我添加will-change一个固定按钮（使用 JS）时，它变得非常不稳定。这适用于“将更改”按钮和没有它的按钮。

显示问题的示例：http: //jsbin.com/kelajo/3/edit ?html,css,js,output

显示问题的 GIF：http: //i.imgur.com/sTSkvFA.gifv

删除will-change线，两个按钮将开始工作。

这是 Chrome 的问题，还是我遗漏了什么？谢谢你。