Performance & Optimization

Patterns and Code
1

@zranger1 and I agree: a P&O thread is sorely needed. Benchmarks and recommended (or non-recommended) ways to speed up FPS are appropriate here.

I know there is a bunch of good info, but it’s scattered on this forum.

2

The pattern “Performance test frameowork” (also on the pattern site) is a good place to start. It measures things pretty accurately, lets you compensate for test loop/framework overhead, and gives you a relative speedup (or slowdown) ratio, and ms timing for the batch, running the batches each frame for 1 second for multiple samples.

Performance test framework.epe (3.8 KB)

Relating to the other thread, this overhead + control + test shows that array access is about 60% the speed of a variable when copying to another variable:

function overhead() {
  //this counts the overhead of the framework and shared setup or 
  //loop code you do not want to count in the results
  var a, i
  for (i = 0; i < size; i++) {
  }
}

function control() {
  var a, i
  for (i = 0; i < size; i++) {
    a = bar
  }
}

function experiment() {
  var a, i
  for (i = 0; i < size; i++) {
    a = foo[0]
  }
}

Timings in milliseconds are also shown (after removing overhead) and show that you can do 1000 variable → variable assignments in 1.04 milliseconds, and 1000 array → variable assignments in 1.7 milliseconds.

Put another way, array access takes about 2/3rds of a microsecond longer per access than a variable. Also keep in mind that much of that overhead comes from resolving the element index value.

3 Likes
3

This is totally normal and expected for all computer languages. The more pointer arithmetic and dereferencing you have to do, the more time it takes.

It slows down a hair more to about 2ms/1000 if you use a variable as an index. This is totally fast enough outside of render(). Awesome really! Once you start doing multiple iterations of something over a single pixel in render() though, the overhead adds up. The new array functions can help, along with doing your best to design patterns to limit the number of iterations per pixel in render(). (Lately, I’m pushing this a little more because I’m enjoying the challenge of “can I do this crazy thing without a canvas?”)

2 Likes