Javascript 萤火虫动画，浏览器在一段时间后变慢

我在看greensock的演示。您可以看到，结果是一个萤火虫动画，不幸的是，时间越长，浏览器运行得越慢。即使设置为总共15-30个点

有没有什么有效的方法来阻止脚本以某种方式累积

function RN(x){
    return Math.random()*x;
  }
    var total = 100 ;
    var w = window.innerWidth;
    var h = window.innerHeight;
    var target = document.getElementById('container');
    for (i=0; i<total; i++){
        var e = document.createElement('div');
        e.className = "dot";
        e.opacity = 0;
        e.style.left = RN(w)+'px';
        e.style.top = RN(h)+'px';
        target.appendChild(e);
        animm(e);
    }
    function animm(elm){
      TweenMax.killTweensOf(elm);
      TweenMax.to(elm, (RN(80))+40, {
        bezier:{
            curviness:3,
            values:[
                {left:RN(w), top:RN(h)},
                {left:RN(w), top:RN(h)}
            ]
        },
        onComplete:function(){
          TweenMax.delayedCall(RN(2), animm, [elm]);
        }
      });
      TweenMax.to(elm, (RN(4)+2),{
        force3D:true,
        opacity:RN(.7)+.1,
        repeat:-1,
        scale:RN(1.25)+.25,
        yoyo:true,
        ease:Bounce.easeInOut
      });
    };

---

仅设置X和Y属性的动画，这对于浏览器渲染来说很便宜，而不是左右。X和Y不会触发布局的重新计算。最好的解决方案是在CPU和GPU之间适当地重新分配内存使用。使用CSS3动画/转换，它使用GPU而不是CPU。javascript动画标准使用CPU。

浏览器处理得很好。如果将“速度”临时更改为3，则可以看到动画速度正在变慢，因为在开始下一个动画之前，随着点逐渐接近其最终目的地并最终停止

TweenMax.to(elm, 3, {
    bezier:{
        curviness:3,
        values:[
            {left:RN(w), top:RN(h)},
            {left:RN(w), top:RN(h)}
    ]
}

您应该尝试使用各种设置使点在整个动画中具有更均匀的速度

TweenMax.to(elm, 3, {
    bezier:{
        curviness:3,
        values:[
            {left:RN(w), top:RN(h)},
            {left:RN(w), top:RN(h)}
    ]
}