使用GPU加速优化渲染Webkit

Question

我开发了一个小型应用程序来测试CSS3和translate3d。这个想法是渲染几个在屏幕上随机移动的DIV。这是一种粒子系统，我知道我可以使用WebGL或Canvas来获得更好的性能，但我也希望它能够在移动浏览器上顺利运行，因此我认为DOM操作对于性能会更好。

你会在这个url

我想达到最佳的性能，增加的DIV的号码找到了几个小时后的结果。

但是，这是我的问题，我有一个“渲染问题”，当我在Chrome或Safari上使用TimeLine时发现。整个页面不时会在Safari iPhone或Chrome Android + iPhone上产生一个可感知的小滞后。

所以，如果你们中的一个人面临挑战，不要犹豫，我尝试了很多事情，但我没有弄清楚如何避免这种昂贵的重绘。

顺便说一句，如果你有一个人有额外的想法来优化这个片段不要犹豫，回复。

由于

---------- UPDATE 1 ----------

基于Ariya建议我通过代码（url）更新和补充另一个测试只使用顶部/左侧。 基于Chrome提供的FPS计数器，我可以看到使用几乎相同帧速率的顶部/左侧属性，fps更稳定。 如果我可以优化CSS3版本来获得更好的性能，你有什么想法吗？我虽然与GPU加速css3会更快我可能做错了。

----------更新2 ----------

我更新了我的代码，使用requestAnimFrame，只有当我需要重新绘制火了。 我发现什么是杀死我在css中定义的perf grey渐变背景经常重绘并导致性能下降。 然而，顶部/左侧似乎仍然比CSS过渡更好:(从纯粹的性能角度来看）

Answer 1

在Google Chrome的开发人员工具中查看时间轴配置文件时，显然有很多样式重新计算。在这个特定的行被指责：

 lastSheet.insertRule('@-webkit-keyframes '+keyframeName+' { .... 

换句话说，连续地改变样式表是昂贵由于在此示例中的元素的动画是关于周围移动它们，而不是使用基于关键帧的动画我。将建议简化为简单的转换。