1

我发现了一篇关于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 Canary 36+、Opera Developer 23+ 和 Firefox Nightly 支持 will-change 属性。也有将其发送到稳定频道的意图。

4

1 回答 1

0

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

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

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

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

于 2015-07-21T12:51:22.870 回答