Question

我只是试图动画这些方块，但我看到的表现非常差，所以我想知道我能做些什么来减少运行一段时间之后发生的减速我假设我必须做一些清理工作？

这是小提琴：

<header id ="space">
 <div id="space_content">   
 </div>
</header>

var universe = ($(window).width() * 400) / 80;
console.log(universe);

var i = 0;
while(i < universe) {
    var rand = Math.floor(Math.random() * 3) + 1;
    var pulse = Math.floor(Math.random() * 500) + 20;
    el = "<div class='star_wrapper'><div class='star' style='width:" + rand +  "px; height:" + rand +  "px; animation-duration:" + pulse + "s; " +  "-webkit-animation-duration:" + pulse + "s;'></div>"
    $('#space_content').append(el);
    i++
}

Answer 1

您可以将元素设置为position:fixed;，因为这会为每个元素提供一个单独的位图。

但是，@vals在他的回答中指出，动画这么多元素最终不会起作用。

这将是画布的一个很好的候选者，因为你可以在画布上一次性绘制你的星星和动画（例如参见我自己的front page here以获得类似的画布方法）。

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

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

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

JavaScript的：

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
})();

Answer 2

你在做什么基本上有大量的div（如果窗口宽度是1000，那么将有5000个div）。对于每一个人来说，都有一个内在的div，而且这个人在这个位置上是动画的。

无论您为优化做什么，这种方法都无法发挥作用。

顺便说一下，你的tittle有点误导，动画不是在javascript中执行，javascript只是执行创建div，动画本身由浏览器处理。

更好的方法是div（和与之相关的动画）有更多的星星（可能是20），因此减少了开销。

没错，星星运动不是完全随机的，会有一群星星同步移动，但任何人都会注意到。

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

如何让这个动画在javascript中表现更好？

2 个答案: