0

我们正在为一些 UI 效果使用 jQuery 插件。该插件效果很好，但在 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 是一个 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 毫秒）。

看起来重（重新）油漆会导致问题。

4

2 回答 2

3

您应该使用带有深度变换的 3d 变换作为恒等变换，以强制 GPU 而不是 CPU 来处理操作。使用scale3dandrotate3d代替scaleand rotate。

于 2013-09-26T12:34:04.923 回答
0

要旋转图像，我使用jQueryRotate 插件，您可以使用jQuery animate方法更改width和标记。 请参阅此链接。 heightimg

$(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});
    });
});
于 2013-09-26T12:51:05.927 回答