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.

var jsarray = [];
jsarray.length = s_w * s_h * 4;
for (var n = 0; n < jsarray.length; n++) {
 jsarray[n] = 0;
}

var tyarray = new Uint8Array(s_w * s_h * 4);

var tyarray = new Uint32Array(s_w * s_h);

fillArrayJS(s_jsarray, s_w, s_h);

fillArrayUint8(s_tyarrayUint8, s_w, s_h);

fillArrayUint32(s_tyarrayUint32, s_w, s_h);

multiplyArrayJS(s_jsarray, s_w, s_h, 1);

multiplyArrayUint8(s_tyarrayUint8, s_w, s_h, 1);

multiplyArrayUint32(s_tyarrayUint32, s_w, s_h, 1);

var caarray = ctx.createImageData(s_w, s_h).data;

fillArrayCanvas(s_caarray, s_w, s_h);

multiplyArrayCanvas(s_caarray, s_w, s_h, 1);

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:

• Revision 1: published by Ben Vanik on 21st April 2011
• Revision 2: published by Ben Vanik on 21st April 2011
• Revision 3: published by Ben Vanik on 21st April 2011
• Revision 4: published by Ben Vanik on 21st April 2011
• Revision 5: published by Vitali on 20th May 2011
• Revision 6: published on 31st January 2012
• Revision 7: published on 28th September 2012

0 comments