CODEWITHSUNDEEP
javascriptperformance
Ajouve
Ajouve

Reputation: 10089

script performance in javascript

I'd like to create a game in html5 with canvas.

But I have a performance question before

Is it better to create a variable each time I need one

var game = ...
var car = ...
var monster = ...

or is it better to instantiate only one var at the beginning of the script and do:

var game = {}
game.car = ...
game.monster = {}
game.monster.attack = function(){...}

Thanks for your help

Upvotes: 1

Views: 131

Answers (3)

John Dvorak
John Dvorak

Reputation: 27277

This test (http://jsperf.com/to-scope-or-not-to-scope) shows that using the local scope is by far the fastest way to go, but creating a self-invoking function just to have a scope more than offsets it.

The best you can do is just use whatever scope you have at hand. The worst you can do (except for the usage of the with keyword) performance-wise is to use a self-invoking function within a tight loop (you should still do it if you want to close over the iteration variable i.e. create a new function anyways). Anything else is sligthly slower than just using the local scope.

Note that javascript does not use block scoping - any variable is scoped to its enclosing function.

Also note that you should minimise the amount of graphics operations, not the overhead from your code around them.

Also note that you should make sure the program will be maintainable, then care about performance.

Upvotes: 2

toxicate20
toxicate20

Reputation: 5410

As seen in the comments you will not really need to wonder about this too much. The biggest thing that comes with doing javascript game programming is that you will have different computer that will have different hardware. Therefore framerates will be different for all of them if you dont interpolate you engine. An example of this would be

// Updated drawing code for our objects
Rect.prototype.draw = function(context, interpolation) {
  context.fillRect(this.x, this.y + this.velocity * interpolation, 30, 30);
};

Game.draw = function(interpolation) {
  this.context.clearRect(0, 0, 640, 480);

  for (var i=0; i < this.entities.length; i++) {
    this.entities[i].draw(this.context, interpolation);
  }
};

Game.run = (function() {
  var loops = 0, skipTicks = 1000 / Game.fps,
      maxFrameSkip = 10,
      nextGameTick = (new Date).getTime(),
      lastGameTick;

  return function() {
    loops = 0;

    while ((new Date).getTime() > nextGameTick) {
      Game.update();
      nextGameTick += skipTicks;
      loops++;
    }

    if (!loops) {
      Game.draw((nextGameTick - (new Date).getTime()) / skipTicks);
    } else {
      Game.draw(0);
    }
  };
})();

This will keep the game logic at your Game.fps. Another thing that you maybe want to avoid is using jQuery in your drawing logic. This is due to the fact that jQuery's animation queue is very slow and you end up having animations stack to the infinite giving you a larger delay with every frame.

Upvotes: 3

Philipp
Philipp

Reputation: 69663

The difference should be so small that you can ignore it. Usually you can rely on the interpreter to perform any such micro-optimizations for you in the background. What you need to focus on are your algorithms.

A rule of thumb in game development is: The performance bottleneck is always the graphic engine. That's where you have to optimize. Avoid over-drawing, avoid re-drawing, avoid drawing invincible stuff, cache, cache, cache.

Upvotes: 2

Related Questions