javascript - -webkit-transform 在 chrome 中的性能问题

Question

我们正在使用 jQuery 插件来实现一些 UI 效果。该插件效果很好，但在 chrome 中它会融化 cpu。该插件尝试对图像进行 css 转换。这是一个图像示例:

<img width="1600" height="568" alt="" src="foo.png"  style="width: 1598px; height: 567px; left: -209px; top: -2px; opacity: 1; transform-origin: center top 0px; transition-duration: 0s; transform: scale(1);">

这里是导致 chrome 问题的代码($img beeing 一个 jQuery 对象):

$img.css({
    "-webkit-transition-duration":"20s",
    "-webkit-transition-timing-function":"ease",
    "-webkit-transform":"scale(0.73) rotate(0.1deg)",
    "-webkit-perspective":"0"
});

有问题的部分是“-webkit-transform”。在 Firefox 中，等效的 CSS 转换没有性能问题。

这个问题是否已知，是否有替代方法？

编辑:

使用 3d 变体并不能解决这里的问题:

$img.css({
    "-webkit-transition-duration":"20s",
    "-webkit-transition-timing-function":"ease",
    "-webkit-transform":"scale3d(0.73,0.73,0.73) rotate3d(0,0,0,0.1deg)",
    "-webkit-perspective":"0"
});

编辑2:

仔细查看 chrome devtools 时间线后，我可以看到很多“复合层”事件(每 15 毫秒)。我还注意到(启用 FPS 计数器后)使用 css 转换时帧率始终约为 60 FPS。

如果我使用简单的 $.animate() 来缩放图像，FPS 最大约为 20，并且“复合层”事件较少(大约每 40 毫秒)。

看起来重(重新)绘画导致了问题。

Answer 1

您应该使用具有深度变换的 3d 变换作为恒等变换，以强制 GPU 代替 CPU 处理操作。使用 scale3d 和 rotate3d 而不是 scale 和 rotate。