如何使該動畫在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），從而減少開銷。

沒錯，星星運動不會完全隨機，會有成群的星星同步運動，但是任何人都會注意到。

好吧，幾乎沒人，我有時在發布的動畫中看到這種效果。 （基本上是因為我知道它通常的工作方式，所以花了一些時間搜索成組的星星）