Как я могу сделать эту анимацию лучше в 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

То, что вы делаете, в основном, имеют огромное количество дивы (если ширина окна 1000, будет 5000 дивы). и для каждого из них есть внутренний div, и этот анимирован в позиции.

Это подход, который не будет работать, независимо от того, что вы делаете для оптимизации.

Кстати, ваш твит немного вводит в заблуждение, анимация не работает в javascript, javascript выполняется только для создания divs, сама анимация обрабатывается браузером.

Лучшим подходом было бы то, что div (и анимация, связанные с ним) имели еще несколько звезд (может быть 20), и поэтому уменьшают накладные расходы.

Правда, движение звезд не будет полностью случайным, появятся группы звезд, движущиеся синхронно, но никто не заметит.

Ну, почти никто, я иногда видел этот эффект в опубликованных анимациях. (В основном потому, что я знаю, как он обычно работает, и я когда-то искал сгруппированные звезды)

Answer 2

Вы можете установить свой элемент в 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 
})();