使用 GPU 加速优化渲染 Webkit

Question

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

几个小时后你会在url找到结果

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

但这是我的问题，我在 Chrome 或 Safari 上使用 TimeLine 时发现了一个“渲染问题”。整个页面有时会在 Safari iPhone 或 Chrome Android+iPhone 上呈现出轻微的延迟。

因此，如果你们中的一个人准备好迎接挑战，请不要犹豫，我尝试了很多方法，但我不知道如何避免这种昂贵的重绘。

顺便说一句，如果你们中的任何人有其他想法来优化这个 sn-ps，请不要犹豫回复。

谢谢

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

根据 Ariya 的建议，我通过代码 (url) 进行了更新，并仅使用顶部/左侧添加了另一个测试。 根据 Chrome 提供的 FPS 计数器，我可以看到使用几乎相同帧速率的顶部/左侧属性时 fps 更加稳定。 您是否知道我是否可以优化 CSS3 版本以获得更好的性能？我虽然使用 GPU 加速的 css3 会更快，但我可能做错了什么。

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

我更新了我的代码以使用 requestAnimFrame 并且仅在我需要重绘时触发它。 我发现导致我在 css 中定义的 perf 灰色渐变背景的原因是经常重绘并导致性能下降。 然而，从纯粹的性能角度来看，top/left 似乎仍然比 CSS 过渡更好:(。

Answer 1

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

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

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