Question

我在CSS中找到了一个interesting article关于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 Canary 36 +，Opera 开发人员23+和Firefox Nightly支持will-change属性。有意将其运送到稳定的渠道。

Answer 1

这是今天的紧凑性:: http://caniuse.com/#search=will-change

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

在Google Chrome控制台中的渲染标签中。如果您使用的是更改属性，则FPS费率不会从60 FPS降低。此外，不会显示show paint矩形。

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

如何使用改变属性来衡量性能增益

1 个答案: