Info

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

Preparation code

<script>
  function fillArray(a) {
   var n = 0;
   for (var y = 0; y < 1024; y++) {
    for (var x = 0; x < 1024; x++) {
     a[n++] = x % 128 + 1;
     a[n++] = x % 128 + 2;
     a[n++] = x % 128 + 3;
     a[n++] = x % 128 + 4;
    }
   }
  };
  
  function fillArray32(a) {
   var n = 0;
   for (var y = 0; y < 1024; y++) {
    for (var x = 0; x < 1024; 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 multiplyArray(a, s) {
   var n = 0;
   for (var y = 0; y < 1024; y++) {
    for (var x = 0; x < 1024; x++) {
     a[n++] *= s;
     a[n++] *= s;
     a[n++] *= s;
     a[n++] *= s;
    }
   }
  };
  
  function multiplyArray32(a, s) {
   var n = 0;
   for (var y = 0; y < 1024; y++) {
    for (var x = 0; x < 1024; 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;
    }
   }
  };
  
  var s_jsarray = [];
  s_jsarray.length = 1024 * 1024 * 4;
  for (var n = 0; n < s_jsarray.length; n++) {
   s_jsarray[n] = 0;
  }
  var s_tyarray8 = new Uint8Array(1024 * 1024 * 4);
  var s_tyarray32 = new Uint32Array(1024 * 1024);
  
  var canvas = document.createElement("canvas");
  document.body.appendChild(canvas);
  var ctx = canvas.getContext("2d");
  var s_caarray = ctx.createImageData(1024, 1024).data;
</script>

Test runner

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

Java applet disabled.

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

var tyarray = new Uint8Array(1024 * 1024 * 4);

var tyarray = new Uint32Array(1024 * 1024);

fillArray(s_jsarray);

fillArray(s_tyarray8);

fillArray32(s_tyarray32);

multiplyArray(s_jsarray, 1);

multiplyArray(s_tyarray8, 1);

multiplyArray32(s_tyarray32, 1);

var caarray = ctx.createImageData(1024, 1024).data;

fillArray(s_caarray);

multiplyArray(s_caarray, 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