javascript - Greensock 动画是如何在其如此高效的引擎盖下工作的？

Question

有一个 speed test在 greensock 网站上与其他动画库、JQuery 甚至 CSS Transitions 比较速度。它通过为数百/数千个分体设置动画来对 FPS 进行基准测试。

greensock 动画的 FPS 超过了其他所有动画。 Css 转换和 JQuery 与 greensock 相差无几。

我尝试搜索有关 greensock 的信息，但找不到太多有用的信息。其中大部分都没有得到很好的解释。

我仍然是 JavaScript 的业余爱好者。如果我尝试制作自己的 JS 动画，它们将不会像 gsap 那样快。差远了。所以很高兴知道引擎盖下发生了什么。他们如何优化那么多!

Answer 1

Jack(GreenSock 的创建者)在 this forum post 中讲述了 GSAP 为何如此之快在其他地方。回顾一下那里的一些要点:

1. 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.)
2. 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.
3. Make updates in a single update loop that's driven by requestAnimationFrame, only falling back to setTimeout() if necessary.
4. Cache some important values internally for faster updates.
5. 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.

没有使它变快的 Elixir 。它的聪明之处在于它基于十几年的经验来做事。