优化SVG游戏

我创建了我的第一个SVG游戏，使用Raphaël.js。优化SVG游戏

在Chrome中，游戏感觉很快，但在IE等其他浏览器（可以理解，因为它使用VML），Firefox，iPad safari和其他浏览器时，感觉有时会很慢。

我正在寻找一些关于如何优化我的代码以挤出绝对最佳性能的提示。我尽我所能来优化它自己，但我只是一个JS初学者。也可以随意提及是否应该使用我没有使用的任何推荐的最佳实践。瓶颈可能在哪里？

你可以看到代码并尝试在jsfiddle上的游戏。

来源

2010-10-30 Sindre Sorhus

似乎不适用于Internet Explorer 8和最新的Google Chrome浏览器。 – 2010-10-30 18:37:28

再试一次，我想我修复了它，似乎在Safari中也没有工作，jsfiddle管理的资源出了问题。 – 2010-10-30 18:49:41

一个优化可能是切换到[ex]画布;-) – 2010-10-30 21:22:11

减少方法调用

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');

这样可以节省你每hitDetection召唤4所的方法调用。同样适用于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); 
};

减少函数调用和缓存变量可以在传统浏览器中有很多帮助，除此之外，代码看起来非常整齐。

来源

2010-10-30 21:17:28 BGerrissen

不幸的是，这些微观优化都无济于事。 – galambalazs 2010-10-30 23:44:07

@galambalaz在解决诸如IE等传统浏览器时，不存在微观优化等问题......在经常调用的函数中减少函数调用实际上可以提供巨大的性能提升。如果它完全解决了问题，但不太可能，但它会提供帮助。 – BGerrissen 2010-10-31 00:05:01

如果性能增益不可忽略，那就是微观优化。理论上产生的结果稍好一些，在特定情况下不起作用。这就是为什么优化应始终与测试结合在一起的原因。 – galambalazs 2010-10-31 08:11:56

我不想听起来令人不安，但我怀疑IE可以做得更好。正如你所看到的，我做了一个只包含动画（没有命中检测，游戏逻辑或mousemove处理程序），速度仍然是不可接受的。

对于火狐我想我找到了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();

来源

2010-10-30 23:42:37 galambalazs

尽量减少DOM调用的次数。

来源

2011-10-27 19:46:47 molst

回答

相关问题