gsap tweenlite/tweenmax 垃圾收集、参考和性能

Question

我正在尝试了解使用 TweenLite/TweenMax 的最佳方式。

• 用同一个变量引用所有补间是否有用？
• 使用相关公共方法杀死补间后，是否必须将引用设置为 null 以改进垃圾收集处理？

下面有一个注释很好的例子：

$(document).ready(function () {
    var elementOne = $('#elementOne');
    var elementTwo = $('#elementTwo');
    var myTween;

    // is it useful to overwrite the variable?
    myTween = TweenMax.to(elementOne, 1, {
        opacity: 0
    });
    myTween = TweenMax.to(elementTwo, 1, {
        left: 0,
        onComplete: destroy
    });

    function destroy () {
        // suggested on tweenmax docs
        // the console.log still returns me the object
        myTween.kill();
        console.log(myTween);

        // is it required for garbage collecting?
        // now the console.log returns me null
        myTween = null;
        console.log(myTween);

        // and then...jQuery GC friendly remove
        elementOne.remove();
        elementTwo.remove();
    }
});

Answer 1

除了通常对任何 JS 对象执行的操作外，您无需执行任何特殊操作即可为 gc 提供补间（或时间线）。换句话说，如果您在自己的代码中维护对实例的引用，它会一直存在（否则您的代码可能会中断）。但是您确实不需要专门 kill() 补间。 GSAP 已经付出了很多努力，以确保事情得到优化并且不会让人头疼。引擎将在必要时自动释放已完成的补间以进行垃圾收集。但是，例如，如果您维护一个引用并重新启动它，补间仍然可以工作。

仅仅因为您在补间实例上调用了 kill()，这并不会强制浏览器运行其垃圾收集例程。它也不会使您的变量为空。这就是 JavaScript 的工作原理（这是一件好事）。它与 TweenLite/Max 无关。

另外请记住，您不需要在变量中存储任何补间实例。唯一有用的是您以后需要控制补间（或将其插入时间轴或类似的东西）。通常只调用 TweenMax.to(...) 而不将结果存储在变量中就可以了。

这样就清楚了吗？