What's the perf difference?

[trusktr]

Do you have a performance comparison with plain JS?

[jtenner]

The good news

Of the measurements I tested here, I found some interesting things. Note that canvas-as is a sub optimized and less organized version of this implementation located here. The as2d library is a much more organized and behavior tested version of canvas-as. It is also way closer to the metal, because it skips using a lot of the standard library features and goes straight after raw memory allocations using ArrayBuffer.

Not to mention that it's unit tested with over 1000 individual granular behaviors.

I genuinely expect as2d to be faster, and more relaiable for these reasons. However, the kinds of benefits I found do not match the kind of optimzations found in hot path replacement. For example:

1. Frame times did not increase or decrease using canvas-as.
2. Garbage collection times dropped SIGNIFICANTLY in all browsers.
3. Overall memory usage dropped by 50% to run the same application using the AssemblyScript version
4. When garbage collection happened, it happened twice as often, but it also happened way more predictably twice per twice per second, with no visible frame slow down

In short, it made animations smoother and more predictable in terms of performance. Also keep in mind that as2d should technically be faster than canvas-as.

The bad news

I have not come up with a good plan to actually measure performance because it's highly dependent on the CanvasRenderingContext2D implementation of the browser. A lot of the function call optimizations this library performs all assume that less function calls to the canvas context means faster code. Indeed, it is the case that frames go faster using web assembly, and it uses way less memory. But there's a catch.

The performance measurements need to be made based on real world measurements, and not just fake contrived load tests.

Most people who use Web Assembly will use it replace a "hot code path" in their code where cpu performance is necessary. In this case, as2d wants to be an application view layer, so the kinds of benefits you get from replacing your "hot code path" don't necessarily apply here. In this case, our performance barriers are much different, as I have already described.

1. We want to reduce garbage collection and memory usage/allocation (for mobile devices even moreso!)
2. We want to avoid doing any kind of cpu intensive stuff while the browser tries to do what the browser needs to do
3. We want frame times to be consistent and predictable.

Going forward

Please open up this issue again in the as2d repo because I want to continue this conversation there.

If we could measure performance using a real world scenario, it would be way easier to get performance metrics.

Also, I would love some help figuring this all out, since I am incredibly busy with 3 kids, and a full time job.

Thank you for your question.