javascript - 优化性能的 JS 动画架构设计

Question

GreenSock 动画引擎的性能提升非常显着。

该库为实现这些收益而做出了哪些潜在的架构决策和权衡？特别是，这个引擎与jQuery animate有什么不同？

Answer 1

greensock的人在这里给出了很好的答案：

1. 全面使用高度优化的 JavaScript（这需要很多东西，比如使用链表、局部变量、快速查找表、内联代码、按位运算符、利用原型而不是为每个实例重新创建函数/变量等）
2. 设计平台的结构，使其非常适合高压情况，最大限度地减少函数调用并确保事情对 gc 友好。
3. 在由 requestAnimationFrame 驱动的单个更新循环中进行更新，仅在必要时回退到 setTimeout()。
4. 在内部缓存一些重要值以加快更新速度。
5. 对于 CSS 变换，我们计算矩阵值并在有任何旋转或倾斜时构造一个 matrix() 或 matrix3d()，因为我们的测试表明它更快。

更多信息：http: //forums.greensock.com/topic/9346-how-does-greensock-perform-b​​etter-than-other-solutions-for-animation/ #entry37777

Answer 2

据我所知，flash 版本：

• 它的构建/设计和优化速度，jquery 是为一致的工作流程而构建的。
• 它使用对象池，也就是回收多种类型的内部对象以最小化实例化
• 它为每个场景使用优化的循环
• 它使用信息对象来帮助/说明正在动画的属性。
• 我不确定他们是否使用相同的缓动功能，但这也可能有所作为。

Tweenlite 作为 tweenengine 有着悠久的历史，它也有很多 jQuery 没有包含的特性。