Javascript -chrome中的webkit转换性能问题

我们使用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);">

有问题的部分是“
-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：

在查看了ChromeDevTools的时间线之后，我可以看到很多“复合层”事件（每15毫秒一次）。我还注意到（启用FPS计数器后），在使用css转换时，帧速率总是在60 FPS左右

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

看起来是重（重）绘制导致了问题。
您应该使用3d转换和深度转换作为身份转换，以强制GPU而不是CPU处理操作。使用
scale3d
和
rotate3d
而不是
scale
和
rotate
您应该使用3d转换和深度转换作为身份转换，以强制GPU而不是CPU处理操作。使用
scale3d
和
rotate3d
而不是
scale
和
rotate
来记录我使用的图像，要缩放，您可以使用jQuery方法更改
img
标记的
宽度
和
高度
。

见链接

要记录我使用的图像，可以使用jQuery方法更改
img
标记的
width
和
height
。

见链接

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

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