Typed Arrays vs Arrays

JavaScript performance comparison

Revision 4 of this test case created by Ben Vanik

Info

Checking the performance of Typed Arrays vs. JS arrays for image processing-like work.

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 unknown unknown
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…

Compare results of other browsers

Revisions

You can edit these tests or add even more tests to this page by appending /edit to the URL. Here’s a list of current revisions for this page:

0 comments

Add a comment