如何衡量使用 will-change 属性的性能增益答案

【问题标题】：How can I measure performance gain from using will-change property如何衡量使用 will-change 属性的性能增益
【发布时间】：2015-07-21 20:51:22
【问题描述】：

我在 CSS 中找到了一个关于 will-change 属性的 interesting article （它允许事先告诉浏览器什么会发生变化并主动做出反应）。这个属性背后的主要原因是为了提高性能。

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

<div class="element"></div>

.element {
    width: 50px;
    height: 50px;
    margin:30px;
    background: red;
    transition: transform 1s ease-out;
}
.element:hover {
    will-change: transform;
}
.element:active {
    transform: rotate(90deg);
}

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

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

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

【问题讨论】：

标签： html performance css will-change

【解决方案1】：

这是截至今天的可压缩性:: http://caniuse.com/#search=will-change

您可以启用 1. FPS计 2.显示绘制矩形

在谷歌浏览器控制台的渲染选项卡中。如果您使用 will-change 属性，则 FPS 速率不会从 60 FPS 下降。也不会显示显示绘制矩形。

如果我们添加到固定元素，Will-change 属性将是最有效的。（滚动时）

【讨论】：