Javascript 如何在浏览器繁忙时在浏览器中实现平滑动画？

在我们的单页应用程序中，用户可以在两种模式之间切换。最显著的视觉差异是顶部导航栏完全不同，这就是为什么我们在两者之间使用crossfade作为模式更改的视觉提示

在播放动画的过程中，浏览器中还发生了很多其他的事情——DOM被更新和重画，XHR被完成，对象被创建和销毁等等。最终的结果是动画变得非常不稳定。事实上，有时看起来好像没有平滑的动画实际发生，因为新的导航栏只出现在两个或三个步骤

---

当浏览器中的javascript引擎处于非常紧张的状态时，有没有什么技巧或技巧可以用来实现平滑动画？CSS转换是否有任何好处？欢迎对此提出任何建议或提供高质量的阅读材料。

尝试使用css3转换实现动画，例如

translateX

。这些可以是硬件加速的，通常更平滑。请记住，并非所有的转换都可以硬件加速，只有非常特定的转换。您知道requestAnimationFrame吗？可能没有帮助，因为还有这么多其他的事情。你可以切换到一个js库，比如

velocity.js

，它通过

requestAnimationFrame

处理动画，减少重画和重绘，使用GPU加速将元素提升为复合层。我猜dom更新会让它变得相当沉重。是否可以等待动画完成，然后更新dom？假设jQuery在内部使用requestAnimationFrame来运行动画，是否正确？可能是吧？