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

Question

我只是想为这些方块设置动画，但是我看到相当糟糕的性能，所以我想知道我可以做些什么来减少它运行一段时间后出现的减速问题，我想我必须做一些清理工作？

这是小提琴：

http://jsfiddle.net/JeKYj/

<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在他的回答中指出。

尽管您可以在画布上同时绘制星星并进行动画处理，但这将是画布的理想选择（例如，有关类似画布方法，请参见我自己的首页 ）。

您可以使用已经拥有的大多数逻辑，而是将星星绘制到画布上，而不是创建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，并且该位置处于动画状态。

无论您如何进行优化，这都是行不通的。

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

更好的方法是使div（及其关联的动画）有更多的星星（可能为20），从而减少开销。

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

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