如何使此动画在javascript中表现得更好？

我只是想给这些方块设置动画，但我看到了非常糟糕的性能，所以我想知道我能做些什么来减少运行一段时间后出现的减速，我想我必须做一些清理

这是小提琴：

变量宇宙=（$（窗口）.width（）*400）/80；
console.log（宇宙）；
var i=0；
而（我<宇宙）{
var rand=Math.floor（Math.random（）*3）+1；
var pulse=Math.floor（Math.random（）*500）+20；
el=“”
$（“#空格_内容”）。追加（el）；
我++
}

您所做的基本上是有大量的div（如果窗口宽度为1000，将有5000个div）。对于每一个，都有一个内部div，这个div在这个位置被设置动画

无论你做什么优化，这种方法都不会流畅地工作

顺便说一句，你的标题有点误导，动画不是用javascript执行的，javascript只是用来创建div的，动画本身是由浏览器处理的

更好的方法是一个div（以及与之相关的动画）有更多的星星（可能是20），从而减少开销

没错，星星的移动不会完全随机，会有几组星星同步移动，但任何人都会注意到

---

嗯，几乎没有人，我有时在出版的动画中看到这种效果。（基本上是因为我知道它通常的工作方式，我花了一些时间搜索分组的星星）

您可以将元素设置为

位置：固定因为这将为每个元素提供一个单独的位图

然而，正如@vals在他的回答中指出的那样，为这么多元素制作动画最终不会奏效

这将是画布的一个很好的候选者，因为您可以在画布上同时绘制星星和动画（例如，请参见我自己的类似画布方法）

您可以使用已有的大部分逻辑，而不是将星星绘制到画布上，而不是创建DOM元素。将动画转换为JavaScript以移动星星

创建单个元素（画布）并根据窗口大小调整其大小：

<canvas id="stars"></canvas>

然后绘制并设置星星的动画（此处未显示，但可以使用一个简单的框架作为基础）：

我们能看到你的密码吗？并尝试将持续时间设置为毫秒，使其速度更快。还可以使用requestAnimationFrame函数根据可用帧正确渲染。
<canvas id="stars"></canvas>

var canvas = document.getElementById('stars'),
    ctx = canvas.getContext('2d');

window.onresize = sizeCanvas;

function sizeCanvas() {
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
}

(function loop() {
    /// clear canvas
    ctx.clearRect(0, 0, canvas.width, canvas.height);

    ...animate and plot the stars here (recommomend using a star "object" ...

    requestAnimationFrame(loop); /// high-efficient timer for animations
})();