Question

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

您可以在url

几个小时后找到结果

我希望尽可能达到最佳性能，以增加DIV的数量。

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

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

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

由于

----------更新1 ----------

基于Ariya的建议，我通过代码（url）更新，并仅使用top / left添加了另一个测试。基于Chrome提供的FPS计数器，我可以看到使用具有几乎相同帧速率的顶部/左侧属性，fps更稳定。你知道我是否可以优化CSS3版本以获得更好的性能吗？我认为使用GPU加速的css3会更快，我可能做错了。

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

我更新了我的代码以使用requestAnimFrame，并且只在我需要重绘时触发它。我发现我在css中定义的穿孔灰色渐变背景经常被重绘并杀死性能。然而，顶部/左侧似乎仍然比CSS过渡更好:(从纯粹的性能角度来看。

Answer 1

在Google Chrome的开发者工具中查看时间轴配置文件时，很明显会有很多样式重新计算。这应归咎于这一特定的界限：

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

换句话说，不断更改样式表昂贵。由于此示例中的元素动画是关于移动它们，而不是使用基于关键帧的动画，我建议简化为简单的过渡。