javascript - 为什么这些粒子使用 CSS3 GPU 变换变慢？

Question

当位置由 translate3d(x,y,z) 设置时，为什么这个例子运行得更慢？

我的猜测是，对 CSS 的每一次更改都需要重新计算样式，当元素没有被发送到 GPU 时，这会更便宜。有没有办法在不重新计算样式的情况下进行我需要的动态转换？

我有兴趣在 iOS 和 Android 上的 WebView 中运行。CSS3 是访问 GPU 的唯一选择吗？有没有办法在这里使用 GPU 来提高性能？

Answer 1

使用 GPU 在移动 web 视图上加速绘图的一个好方法是通过<Canvas>元素。这个类似的例子能够以类似的帧速率移动四倍的粒子：

画布粒子