# Typed Arrays vs Arrays

## JavaScript performance comparison

Revision 4 of this test case created by Ben Vanik

## Preparation code

``````<script>
function fillArrayJS(a, w, h) {
var n = 0;
for (var y = 0; y < h; y++) {
for (var x = 0; x < w; x++) {
a[n++] = x % 128 + 1;
a[n++] = x % 128 + 2;
a[n++] = x % 128 + 3;
a[n++] = x % 128 + 4;
}
}
};

function fillArrayUint8(a, w, h) {
var n = 0;
for (var y = 0; y < h; y++) {
for (var x = 0; x < w; x++) {
a[n++] = x % 128 + 1;
a[n++] = x % 128 + 2;
a[n++] = x % 128 + 3;
a[n++] = x % 128 + 4;
}
}
};

function fillArrayUint32(a, w, h) {
var n = 0;
for (var y = 0; y < h; y++) {
for (var x = 0; x < w; x++) {
var a = x % 128 + 1;
var r = x % 128 + 2;
var g = x % 128 + 3;
var b = x % 128 + 4;
a[n++] = (a << 24) | (r << 16) | (g << 8) | b;
}
}
};

function fillArrayCanvas(a, w, h) {
var n = 0;
for (var y = 0; y < h; y++) {
for (var x = 0; x < w; x++) {
a[n++] = x % 128 + 1;
a[n++] = x % 128 + 2;
a[n++] = x % 128 + 3;
a[n++] = x % 128 + 4;
}
}
};

function multiplyArrayJS(a, w, h, s) {
var n = 0;
for (var y = 0; y < h; y++) {
for (var x = 0; x < w; x++) {
a[n++] *= s;
a[n++] *= s;
a[n++] *= s;
a[n++] *= s;
}
}
};

function multiplyArrayUint8(a, w, h, s) {
var n = 0;
for (var y = 0; y < h; y++) {
for (var x = 0; x < w; x++) {
a[n++] *= s;
a[n++] *= s;
a[n++] *= s;
a[n++] *= s;
}
}
};

function multiplyArrayUint32(a, w, h, s) {
var n = 0;
for (var y = 0; y < h; y++) {
for (var x = 0; x < w; x++) {
var v = a[n];
var a = (v >> 24) & 0xFF;
var r = (v >> 16) & 0xFF;
var g = (v >> 8) & 0xFF;
var b = (v) & 0xFF;
a *= s;
r *= s;
g *= s;
b *= s;
a[n++] = (a << 24) | (r << 16) | (g << 8) | b;
}
}
};

function multiplyArrayCanvas(a, w, h, s) {
var n = 0;
for (var y = 0; y < h; y++) {
for (var x = 0; x < w; x++) {
a[n++] *= s;
a[n++] *= s;
a[n++] *= s;
a[n++] *= s;
}
}
};

var s_w = 1024;
var s_h = 1024;

var s_jsarray = [];
s_jsarray.length = s_w * s_h * 4;
for (var n = 0; n < s_jsarray.length; n++) {
s_jsarray[n] = 0;
}
var s_tyarrayUint8 = new Uint8Array(s_w * s_h * 4);
var s_tyarrayUint32 = new Uint32Array(s_w * s_h);

var canvas = document.createElement("canvas");
document.body.appendChild(canvas);
var ctx = canvas.getContext("2d");
var s_caarray = ctx.createImageData(s_w, s_h).data;

var s_jsarray1 = [0, 0, 0, 0];
var s_tyarrayUint81 = new Uint8Array(4);
var s_tyarrayUint321 = new Uint32Array(4);
var s_caarray1 = ctx.createImageData(1, 1).data;
fillArrayJS(s_jsarray1, 1, 1);
fillArrayUint8(s_tyarrayUint81, 1, 1);
fillArrayUint32(s_tyarrayUint321, 1, 1);
fillArrayCanvas(s_caarray1, 1, 1);
</script>
``````

## Test runner

Warning! For accurate results, please disable Firebug before running the tests. (Why?)

Java applet disabled.

Testing in CCBot 2.0.0 / Other 0.0.0
Test Ops/sec
JS Create
``````var jsarray = [];
jsarray.length = s_w * s_h * 4;
for (var n = 0; n < jsarray.length; n++) {
jsarray[n] = 0;
}``````
pending…
Typed Create (byte)
``var tyarray = new Uint8Array(s_w * s_h * 4);``
pending…
Typed Create (uint)
``var tyarray = new Uint32Array(s_w * s_h);``
pending…
JS Fill
``fillArrayJS(s_jsarray, s_w, s_h);``
pending…
Typed Fill (byte)
``fillArrayUint8(s_tyarrayUint8, s_w, s_h);``
pending…
Typed Fill (uint)
``fillArrayUint32(s_tyarrayUint32, s_w, s_h);``
pending…
JS Multiply
``multiplyArrayJS(s_jsarray, s_w, s_h, 1);``
pending…
Typed Multiply (byte)
``multiplyArrayUint8(s_tyarrayUint8, s_w, s_h, 1);``
pending…
Typed Multiply (uint)
``multiplyArrayUint32(s_tyarrayUint32, s_w, s_h, 1);``
pending…
Canvas Create
``var caarray = ctx.createImageData(s_w, s_h).data;``
pending…
Canvas Fill
``fillArrayCanvas(s_caarray, s_w, s_h);``
pending…
Canvas Multiply
``multiplyArrayCanvas(s_caarray, s_w, s_h, 1);``
pending…

## Revisions

You can edit these tests or add even more tests to this page by appending `/edit` to the URL.