ArrayBuffer vs ObjectBuffer

JavaScript performance comparison

Revision 3 of this test case created by Esailija

Preparation code

<script>
window.bleh = false;

function RGBA() {
  this.r = 0;
  this.g = 0;
  this.b = 0;
  this.a = 255;
}
var size = 256 * 256 * 4;
var buffer = new ArrayBuffer(size);
data = new Uint8ClampedArray(buffer);
data8 = new Uint8Array(buffer);
data32 = new Uint32Array(buffer);
var ar = new Array(data32.length);
for (var x = 0; x < ar.length; x += 1) {
  ar[x] = new RGBA();
}

function Array8Clamped(data, data32) {
    var index = 0;
    for (var i = 0, end = data32.length; i < end; i++) {
        data[index] = 255;
        data[index + 1] = 255;
        data[index + 2] = 255
        index += 4;
    }
}

function object(ar) {
    for (var i = 0, end = ar.length; i < end; i++) {
        ar[i].r = 255;
        ar[i].g = 255;
        ar[i].b = 255;
    }
}

function array32(data32) {
    for (var i = 0, end = data32.length; i < end; i++) {
        data32[i] = (Math.round(255) << 16) | // blue
        (Math.round(255) << 8) | // green
        Math.round(255); // red;
    }
}

function array8(data8, data32) {
    var index = 0;
    for (var i = 0, end = data32.length; i < end; i++) {
        data8[index] = 256;
        data8[index + 1] = 256;
        data8[index + 2] = 256
        index += 4;
    }
}

function array32clamped(data32) {
    var r, g, b;
    for (var i = 0, end = data32.length; i < end; i++) {
        r = Math.round(256);
        g = Math.round(256);
        b = Math.round(256);
        if (r > 255) r = 255;
        else if (r < 0) r = 0;
        if (g > 255) g = 255;
        else if (g < 0) g = 0;
        if (b > 255) b = 255;
        else if (b < 0) b = 0;
        data32[i] = (r << 16) | // blue
        (g << 8) | // green
        b | 255 << 24; // red;
    }
}

function array32clamped2(data32) {
    var r, g, b, color;

    for (var i = 0, end = data32.length; i < end; i++) {
        r = 255;
        g = 255;
        b = 255;
        //r = Math.min(255,Math.max(0,round(r)));
        //g = Math.min(255,Math.max(0,round(g)));
        // b = Math.min(255,Math.max(0,round(b)));
        //color = (Math.min(255, Math.max(0, round(r))) << 16) | (Math.min(255, Math.max(0, round(g))) << 8) | Math.min(255, Math.max(0, round(b))) | 255 << 24;
        data32[i] = (Math.min(255, Math.max(0, Math.round(r))) << 16) | // blue
        (Math.min(255, Math.max(0, Math.round(g))) << 8) | // green
        Math.min(255, Math.max(0, Math.round(b))) | 255 << 24; // red;
        // data32[i] = color;
    }
}

var l = 100;
while(l--) {
Array8Clamped(data, data32);
object(ar);
array32(data32)
array8(data8, data32)
array32clamped(data32);
array32clamped2(data32);
}

</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
Array8Clamped
Array8Clamped(data, data32);
pending…
Object
object(ar);
pending…
Array32
array32(data32)
pending…
Array8
array8(data8, data32)
pending…
Array32Clamped
array32clamped(data32);
pending…
Array32Clamped2
array32clamped2(data32);
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