var/let vs "cached" variables in game loop?

[ShotgunJed]

Which one is more better in terms of speed: (Regarding variables set in a game loop)

update() {
  var xSpeed = player.xSpeed;
  // Do something
}

or:

var xSpeed;

update() {
  xSpeed = player.xSpeed;
  // Do something
}

 

Does the fact that update() getting called multiple times a second make it slower for the first approach, since the system has to initialise and then destroy the variable? Would it be better instead to cache the variables outside and just re-use them?

[mattstyles]

Try using https://jsperf.com/ to test it!

I'd be inclined to say the 2nd would be faster, as the 1st implies the engine might have to do slightly more work but the difference would be extremely minimal and I expect the engine optimises this stuff out at runtime anyway meaning any gain would be super minimal. But a quick jsperf should help narrow it down a little.

[BobF]

I suspect your first scenario is a tad faster because the JS engine does not have to look as deeply in scope to find the location of xSpeed as it does in the second scenario. The presence of xSpeed at the higher scope makes other variables at that same level a bit slower to find as well. But I agree with Matt, JS engine optimizations will almost certainly make any performance difference negligible. If update is the only function that references xSpeed then from the perspective of good design xSpeed should be declared within update.

[TomC]

For declaring a primitive value such as (bool , string, number) then the performance difference would be negligible.

As the above posters have said, one way has a quicker lookup scope, the other doesn't have to re-declare and initialise the variable.

However if the above example was any kind of object, i.e. var speed = [player.xSpeed, player.ySpeed]

Then you would definitely declare this outside the update loop and reuse the object for performance.

[mattstyles]

4 hours ago, TomC said:

Then you would definitely declare this outside the update loop and reuse the object for performance.

I can't be certain without a jsperf (or other benchmark), but I'd still bet there would be no to negligible gains. The JS engine optimises loads of stuff like this away during JIT (or during hot-path evaluation whilst running).

You might well want to reuse the object for other reasons though...

[TomC]

1 hour ago, mattstyles said:

I can't be certain without a jsperf (or other benchmark), but I'd still bet there would be no to negligible gains. The JS engine optimises loads of stuff like this away during JIT (or during hot-path evaluation whilst running).

You might well want to reuse the object for other reasons though...

Just whipped up a jsperf. 

https://jsperf.com/declare-object-in-game-loop

On firefox declaring the object inside the loop is up-to 100% slower!

However on chrome/safari declaring inside is actually quicker by a very small margin.

If your going to be dealing with older browsers and mobile's I would stick to declaring outside and re-using, If not then I wouldn't worry either way.

[mattstyles]

@TomC

Thats awesome!

So much for Quantum being quantum-fast! However the difference between 40K and 860K, whilst a lot, is probably totally unnoticeable!

Interestingly, Safari on my macbook is super quick, nearly 4 times faster than Chrome or FF Quantum, with Safari on my old iPhone 6S also faster than both browsers on my macbook. Weird.

Like you, I'd have thought phones might perform worse for test2 (declared inside) but it looks like only FF has issue. Quite want to check on my quicker machine at home, and check Edge too there.