Greensock 动画是如何在其如此高效的引擎盖下工作的？
How Greensock animations work under the hood that it's so performant?
greensock 网站上有一个 speed test 与其他动画库 JQuery 或 Even CSS Transitions 比较速度。它通过动画化 hundreds/thousands 的 perticles 来对 FPS 进行基准测试。
greensock 动画的 FPS 超过了其他所有动画。 Css transitions & JQuery 与 greensock 相差无几。
我尝试搜索有关 greensock 的信息，但找不到太多有用的信息。其中大部分都没有很好地解释。
在javascript我还是个业余爱好者。如果我尝试制作自己的 JS 动画，它们将不会像 gsap 那样快。差远了。所以很高兴知道引擎盖下发生了什么。他们如何优化那么多！
Jack（GreenSock 的创建者）讲述了 GSAP 如何在 this forum post 等地方如此之快。回顾一下那里的一些要点：
- Use highly optimized JavaScript across the board (this entails many things like using linked lists, local variables, quick lookup tables, inlining code, bitwise operators, leveraging prototypes instead of recreating functions/variables for each instance, etc.)
- Engineer the structure of the platform so that it lends itself very well to high-pressure situations, minimizing function calls and making sure things are gc-friendly.
- Make updates in a single update loop that's driven by requestAnimationFrame, only falling back to setTimeout() if necessary.
- Cache some important values internally for faster updates.
- For CSS transforms, we calculate matrix values and construct either a matrix() or matrix3d() when there's any rotation or skewing because our tests showed that it was faster.
没有让它变快的灵丹妙药。它只是基于十几年的经验做事的方式很聪明。
greensock 网站上有一个 speed test 与其他动画库 JQuery 或 Even CSS Transitions 比较速度。它通过动画化 hundreds/thousands 的 perticles 来对 FPS 进行基准测试。
greensock 动画的 FPS 超过了其他所有动画。 Css transitions & JQuery 与 greensock 相差无几。
我尝试搜索有关 greensock 的信息，但找不到太多有用的信息。其中大部分都没有很好地解释。
在javascript我还是个业余爱好者。如果我尝试制作自己的 JS 动画，它们将不会像 gsap 那样快。差远了。所以很高兴知道引擎盖下发生了什么。他们如何优化那么多！
Jack（GreenSock 的创建者）讲述了 GSAP 如何在 this forum post 等地方如此之快。回顾一下那里的一些要点：
- Use highly optimized JavaScript across the board (this entails many things like using linked lists, local variables, quick lookup tables, inlining code, bitwise operators, leveraging prototypes instead of recreating functions/variables for each instance, etc.)
- Engineer the structure of the platform so that it lends itself very well to high-pressure situations, minimizing function calls and making sure things are gc-friendly.
- Make updates in a single update loop that's driven by requestAnimationFrame, only falling back to setTimeout() if necessary.
- Cache some important values internally for faster updates.
- For CSS transforms, we calculate matrix values and construct either a matrix() or matrix3d() when there's any rotation or skewing because our tests showed that it was faster.
没有让它变快的灵丹妙药。它只是基于十几年的经验做事的方式很聪明。