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

Posted 2023-05-08

【中文标题】优化性能的 JS 动画架构设计

【英文标题】：JS animation architectural design for optimal performance

【发布时间】：2012-09-07 20:01:30

【问题描述】：

GreenSock animation engine 的性能提升相当显着。

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

【问题讨论】：

+1 很棒的是他们也用 JS 实现了它（我只知道 Flash AS2 和 3）。我不知道。

从提供的第一个链接看，GreenSock 和 jQuery /从输出 / 最明显的区别是 GreenSock 使用整数，而 jQuery 似乎使用浮点数。

去greensock论坛直接问Jack，他会告诉你为什么这么好。

@Neil forums.greensock.com/topic/6601-architecture-overview

这似乎是部分原因：***.com/questions/7999680/…

【参考方案1】：

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

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

更多： http://forums.greensock.com/topic/9346-how-does-greensock-perform-better-than-other-solutions-for-animation/#entry37777

【参考方案2】：

据我所知，flash 版本的速度：

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

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