Javascript 元素的旋转不平滑

我正在开发一个HTML5游戏，它是关于不断旋转一个div元素并向其中添加元素

我注意到旋转并不像它应该的那样平滑和规则，有时可以注意到一些小的跳跃

我使用了一个带有旋转变换的setInterval来创建效果，但是效果很差，而且不稳定。然后，我修改了代码，使用requestAnimationFrame，它运行得更好，但仍然不够完美，并限制了速度控制

我还使用此CSS代码将动画处理传递到GPU：

transform: translate3d(0, 0, 0);
backface-visibility: hidden;
perspective: 1000;

-webkit-transform: translate3d(0, 0, 0);
-webkit-backface-visibility: hidden;
-webkit-perspective: 1000;

---

有人知道我还能做些什么来改进动画吗？cordova看起来很简单，一次动画也不错，但是当我们需要不断地为某些元素设置动画时，性能就不是很好了

您可以尝试使用为dom动画优化的其他库。我还没有实际使用过一个，所以我不能说是否有显著的性能提升，但它们听起来还是很有希望的：

---

我听说过关于这个的好消息：

我的建议：使用画布

但是，要坚持使用现有的代码库：

您可以将它放在一个有足够空间的边界框中，这样它就不必在旋转时重新计算整个页面（页面长度/宽度在旋转时不会改变），从而使事情变得平滑。不过，使用画布和webgl会使事情变得更加平滑

此外，对于任何繁重的标记扩展处理（计算事物应该去哪里、旅行路径等），请使用将对象发布到的webworker（不要作为json参数发布。使用postMessage的单个参数作为对象传递）。这样，渲染线程就不必等待计算来保持旋转，只需在完成后推动路径与元素一起移动即可

---

另外，保存对对象的引用。不要重复使用document.getElementById。使用document.getElementById一次，并保留引用并将其传递。

您有没有看一下这另一个问题？

---

这是一样的吗？

您是否在浏览器中进行过分析，以查明代码中的实际性能瓶颈？Gracias Raúl！这是不一样的，但我可以适应我的程序。现在它运行平稳，我甚至可以控制我想要使用的速度。