Question

我们正在使用jQuery插件来实现一些UI效果。该插件效果很好，但在chrome中它融化了cpu。该插件尝试css-transform图像。这是一个图像示例：

<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 a jQuery object）：

$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"
});

EDIT2：

在深入研究chrome devtools时间轴之后，我可以看到很多“复合图层”事件（每15毫秒）。我还注意到（在启用FPS计数器之后）使用css转换时帧速率总是约为60 FPS。

如果我使用一个简单的$ .animate（）来缩放图像，那么FPS最大约为20，并且“复合图层”事件（大约每40毫秒）就会减少。

看起来沉重的（重新）绘画会导致问题。

Answer 1

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

Answer 2

要使用jQueryRotate plugin来旋转图片，要进行缩放，您可以使用jQuery animate方法更改width标记的height和img。
请参阅this链接。

$(document.body).ready(function(){
    $("img").mouseover(function(){
        var width = $(this).width();
        var height = $(this).height();
        var toResize = Math.random() * 20 - 10;
        var newWidth = parseInt(width + toResize * width/height);
        var newHeight = parseInt(height + toResize * height/width);
        $(this).animate({
            width: newWidth + 'px',
            height: newHeight + 'px'
        }, 100, function(){
            //complete
        });
        var angle = Math.random() * 360;
        $(this).rotate({animateTo: angle});
    });
});

-webkit-transform chrome中的性能问题

2 个答案: