jsPerf.app is an online JavaScript performance benchmark test runner & jsperf.com mirror. It is a complete rewrite in homage to the once excellent jsperf.com now with hopefully a more modern & maintainable codebase.
jsperf.com URLs are mirrored at the same path, e.g:
https://jsperf.com/negative-modulo/2
Can be accessed at:
https://jsperf.app/negative-modulo/2
Now on the next test: In the previous version, we did not concern ourselves with the CREATION of the image buffers at all. In this test, we will add this (important factor) into consideration.
There are two ways to get an image buffer - createImageData (which creates blank data), and getImageData (which gets the current buffer from a canvas). These two both have their own respective advantages/disadvantages.
So here we test a combination of different ways of clearing the canvas, getting image data, drawing, all for both one large block and many small blocks.
<canvas id="canvas" width="1024" height="1024" style="display: none"/>
<script>
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
function clear_canvas() {
// The following is the proven fastest way to clear the canvas
ctx.globalCompositeOperation = 'source-over';
ctx.fillStyle = 'rgba(0,0,0,1)';
ctx.fillRect(0, 0, 1, 1);
ctx.clearRect(0, 0, 500, 500);
}
var external_data_1024 = ctx.createImageData(1024, 1024);
var external_data_32 = ctx.createImageData(32,32);
</script>
Ready to run.
Test | Ops/sec | |
---|---|---|
canvas clear/getImageData/putImageData (1024) |
| ready |
createImageData/putImageData (32) |
| ready |
createImageData/clear/draw/putImageData (1024) |
| ready |
external image data/clear/display/put (1024) |
| ready |
external image data/clear/draw/put (32) |
| ready |
You can edit these tests or add more tests to this page by appending /edit to the URL.