如何衡量使用“遗嘱更改”属性的性能增益？

Question

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

据我所知，我可以以以下方式使用它：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);
}

到目前为止还不错，但是为了谈论性能的提高，应该有一种方法来衡量这种改进。

那么，是否有一种方法来衡量性能，CPU/GPU的利用率与不含will-change。

在撰写本文时，只有Chrome 36+、Opera开发人员23+和Firefox支持will-change属性。有一个意图是把它运到稳定的通道。

Answer 1

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

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

在中呈现选项卡。如果您使用的是“更改”属性，则FPS比率不会从60 FPS下降.此外，显示油漆矩形将不会显示。

如果我们添加固定元素(当滚动时)，将更改属性将是最有效的。