Оптимизация игры SVG

Question

Я создал свою первую игру SVG, используя Raphaël.js.

В Chrome игра кажется быстрой, но в другом браузере, таком как IE (понятно, поскольку он использует VML), Firefox, iPad Safari и другие, он чувствует себя медленным время от времени.

Я ищу несколько советов о том, как я могу оптимизировать свой код, чтобы выжать абсолютную лучшую производительность. Я старался изо всех сил оптимизировать его самостоятельно, но я просто начинающий JS. Также не стесняйтесь упоминать, следует ли использовать рекомендуемые рекомендации, которые я не использую. Где вероятность того, что узкое место?

Вы можете увидеть код и попробовать игру на jsfiddle.

Answer 1

уменьшить метод вызывает

var left1 = a.attr('x'), 
left2 = b.attr('x'), 
right1 = a.attr('x') + a.attr('width'), 
right2 = b.attr('x') + b.attr('width'), 
top1 = a.attr('y'), 
top2 = b.attr('y'), 
bottom1 = a.attr('y') + a.attr('height'), 
bottom2 = b.attr('y') + b.attr('height'); 

Может быть оптимизированы таким образом:

var left1 = a.attr('x'), 
left2 = b.attr('x'), 
right1 = left1 + a.attr('width'), 
right2 = left2 + b.attr('width'), 
top1 = a.attr('y'), 
top2 = b.attr('y'), 
bottom1 = top1 + a.attr('height'), 
bottom2 = top2 + b.attr('height'); 

Это позволяет сэкономить 4 метода вызовов в hitDetection вызова. То же самое относится к wallDetection и, возможно, к другим функциям. На самом деле, я также считаю, что вызовы ширины и высоты можно удалить и просто кэшировать через закрытие, так как они довольно статичны после создания, см. Следующий пример.

Также со следующим битом:

var animateEnemies = function(enemy) { 
    var enemyWidth = enemy.attr('width'), 
    enemyHeight = enemy.attr('height'), 
... 

Вы можете установить ширину и высоту врагов один раз, так что они кажутся довольно постоянны, вы можете удалить .attr() поиск и передать ширину и высоту от createEnemies вызова также.

var animateEnemies = function(enemy , enemyWidth , enemyHeight) { 
    var animationDuration = getRandomInt(1000, 3000)/difficulty; 
    enemy.animate({ 
     x: getRandomInt(0, gameWidth - enemyWidth), 
     y: getRandomInt(0, gameHeight - enemyHeight) 
    }, animationDuration, "ease-in-out"); 
    // use setTimout instead of onAnimation callback, since it gave "too much recursion" in Firefox 3.6 
    this.timeOut = setTimeout(function() { 
     animateEnemies(enemy , enemyWidth , enemyHeight); 
    }, animationDuration); 
}; 

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

Answer 2

Я не хочу звучать страшно, но я сомневаюсь IE может сделать лучше. Как вы можете видеть, я сделал , состоящий только из анимаций (без обнаружения попадания, игровой логики или обработчика mousemove), и скорость по-прежнему неприемлема.

Для Firefox Я думаю, что я узнал, how избежать медлительности:

var mouseMove = function(e) { 

    // only do this if there's at least 20ms diff. 
    var now = +new Date(); 
    if (now - mouseMove.last < 20) 
     return; 
    else 
     mouseMove.last = now; 

    // ... 
}; 

mouseMove.last = +new Date(); 

Answer 3

Минимизировать количество DOM-вызовов.