css3 动画性能不佳（仅限 Chrome）

Posted 2023-03-06

【中文标题】css3 动画性能不佳（仅限 Chrome）

【英文标题】：css3 poor animation performance (Chrome only)

【发布时间】：2012-04-09 19:01:38

【问题描述】：

我正在开发一个使用 css3 动画的网站，它在 Safari 和 Firefox 中运行良好，但由于某种原因在 Chrome 中的性能很糟糕。 （大约 15 帧/秒）

http://triple-tested.com/animations/

动画很简单，基本上是几个大圆圈层层叠叠。我还使用 javascript 添加了一些 png sprite 动画。

我知道硬件加速，但我不认为这是问题所在，这似乎是 Chrome 独有的一些怪癖。 css 动画单独执行“OK”，但是一旦我添加精灵，性能就会大大下降。

    $.fn.spriteme = function(options) 
        var settings = $.extend( framerate: 30 , options);        

        return this.each(function()
            var $el =  $(this),
                    curframe = 0,
                    width = settings.width,
                    fr = 1000/settings.framerate;


            (function animloop()
                if(curframe == settings.frames)  curframe = 0;    
                $el.css('background-position', (curframe*width)*-1  + 'px center');
                curframe++;
                setTimeout( animloop, fr );
            )();       
        );     
    ;

这是我编写的用于动画精灵的代码，但正如我所说，它在 Safari 和 Firefox 中表现完美，所以我认为这不是问题所在。 Chrome 似乎在使用 css 和 sprite 制作动画时存在问题。

我已经尝试了所有可以在网上找到的方法，但如果有人有任何建议，请告诉我。

我在 mac btw (17.0.963.93) 上使用最新的稳定版 chrome

顺便说一句，您可以在这里看到 css（使用较少） http://triple-tested.com/animations/css/style.less

【问题讨论】：

页面上有 CSS 阴影吗？我注意到 chrome 在重绘阴影时往往运行异常缓慢

不，没有阴影。它基本上是四五个圆形图像旋转。

好看的动画！我尝试使用 18. (beta)。还是很慌张。您可能想将此问题提交给他们的跟踪器，以了解开发人员要说什么。见code.google.com/p/chromium/issues。

真的很酷的动画。 Chrome Canary (v. 19) 中的性能并没有那么差

我可以确认，Opera 11.51 的性能低于 15 fps，我的硬件是 Intel Core i5，3GHz，具有 8Gb RAM 和内置显卡，我认为这与硬件加速，很可能与它的浏览器实现有关。

【参考方案1】：

感谢大家的回复，我认为这是某些版本的 chrome 的问题，因为它在最新的金丝雀版本中完美运行。

我最终剥离了一些 chrome 的动画，优雅地退回到静态图像。