我开发了一个小应用程序来测试CSS3和translate3d。我们的想法是渲染几个div在屏幕上随机移动。这是一种粒子系统，我知道我可以使用WebGL或Canvas来获得更好的性能，但我也希望它能够在移动浏览器上顺利运行，因此我认为DOM操作将更好地提高性能。
您将在此url上找到几个小时后的结果
我想达到最好的性能，以增加div的数量。
但这是我的问题，我有一个"渲染问题"，我发现当我在Chrome或Safari上使用时间轴。在Safari iPhone或Chrome Android+iPhone上，整个页面有时会产生可察觉的小延迟。
如果你们中有谁愿意接受挑战，请不要犹豫。我尝试了很多方法，但我不知道如何避免昂贵的重画。
顺便说一句，如果你们中有人有额外的想法来优化这个片段，请不要犹豫回复。
感谢---------- UPDATE 1 ----------
基于Ariya的建议，我更新了代码(url)，并添加了另一个只使用顶部/左侧的测试。基于Chrome提供的FPS计数器，我可以看到使用几乎相同帧率的顶部/左侧属性，FPS更稳定。你有任何想法，如果我可以优化CSS3版本有更好的性能?我认为css3与GPU加速会更快，我可能做错了什么。
---------- UPDATE 2 ----------
我更新了我的代码使用requestAnimFrame，只有当我需要重新绘制时才触发它。我发现是什么破坏了我在css中定义的全灰度渐变背景是经常重画，破坏了性能。然而，从纯粹的性能角度来看，top/left似乎仍然比CSS过渡要好。
当在Google Chrome的开发者工具中查看时间轴配置文件时，很明显有很多样式重新计算。这应该归咎于这一行:
lastSheet.insertRule('@-webkit-keyframes '+keyframeName+' { ....