gsap tweenlite/tweenmax сборка мусора, ссылки и производительность

Я пытаюсь понять, как лучше всего использовать TweenLite/TweenMax.

  • Полезно ли ссылаться на все мои твины с одной и той же переменной?
  • Нужно ли после уничтожения анимации относительного общедоступного метода установить для ссылки null значение 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();
    }
});

javascript performance gsap garbage-collection
person Luke    schedule 02.10.2013    source источник

Ответы (1)


arrow_upward
12
arrow_downward

Вам не нужно делать ничего особенного, чтобы сделать анимацию движения (или временную шкалу) доступной для gc, кроме того, что вы обычно делаете для любого объекта JS. Другими словами, если вы поддерживаете ссылку в своем собственном коде на экземпляр, он останется (иначе ваш код может сломаться). Но вам НЕ нужно специально kill() анимацию. В GSAP было вложено много усилий, чтобы все было оптимизировано и не вызывало головной боли. При необходимости движок автоматически освобождает завершенные анимации для сборки мусора. И все же анимация все равно будет работать, если вы, например, сохраните ссылку и перезапустите().

Тот факт, что вы вызываете kill() для экземпляра анимации, не заставляет браузер запускать процедуру сборки мусора. Это также не обнуляет вашу переменную. Именно так работает JavaScript (и это хорошо). Это не имеет никакого отношения конкретно к TweenLite/Max.

Также имейте в виду, что вам не нужно хранить какие-либо экземпляры анимации движения в переменных. Единственный раз, когда это полезно, - это если вам нужно позже управлять анимацией (или вставить ее на временную шкалу или что-то в этом роде). Обычно можно просто вызвать TweenMax.to(...) без сохранения результата в переменной.

Это проясняет ситуацию?

person Jack    schedule 03.10.2013
comment
Иногда вам нужно вручную убить анимацию, например, когда пользователь покидает экран, на котором воспроизводится анимация зеленого носка. Вы не хотите, чтобы эти твины вызывали обратные вызовы, когда контейнер экрана уже удален. - person Kokodoko; 17.10.2014