Run results for: Extending ArrayBufferView with Properties

Run details:

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:91.0) Gecko/20100101 Firefox/91.0

Browser: Firefox 91

Operating system: Mac OS X 10.15

Device Platform: Desktop

Date tested: 2 years ago

Test name	Executions per second
Regular Array	4723.9 Ops/sec
Uint Array	5164.0 Ops/sec
Uint Array Expando	5110.8 Ops/sec
Custom Array	50820500.0 Ops/sec
Custom Uint Array	44522380.0 Ops/sec

Script Preparation code:

class CustomArray extends Array {
    constructor(...args) {
        super(...args);
        this.position = 0;
    }
}

class CustomUint8Array extends Uint8Array {
    constructor(...args) {
        super(...args);
        this.position = 0;
    }
}

const LENGTH = 12000;

var rArray = [];
var uint8Array = new Uint8Array(LENGTH);
var uint8ArrayExp = new Uint8Array(LENGTH);
uint8ArrayExp.position = 0;
var cArray = new CustomArray(LENGTH);
var cUint8Array = new CustomUint8Array(LENGTH);

for (let i = 0; i < LENGTH; i++) {
    const v = ~~(Math.random() * 255);
    rArray.push(v);
    uint8Array[i] = v;
    uint8ArrayExp[i] = v;
    cArray[i] = v;
    cUint8Array[i] = v;
}

console.log(`rArray: ${rArray.length}, uint8Array: ${uint8Array.length}, uint8ArrayExp: ${uint8ArrayExp.length}, cArray: ${cArray.length}, cUint8Array: ${cUint8Array.length}`);

Tests:

Regular Array
function read(arr, offset) { let pos = offset; while (pos < arr.length) { pos++; if (arr[pos] < 127) { return pos; } } return pos; } let o = 0; while (o < rArray.length) { o = read(rArray, o); }
Uint Array
function read(arr, offset) { let pos = offset; while (pos < arr.length) { pos++; if (arr[pos] < 127) { return pos; } } return pos; } let o = 0; while (o < uint8Array.length) { o = read(uint8Array, o); }
Uint Array Expando
function read(arr) { while (arr.position < arr.length) { arr.position++; if (arr[arr.position] < 127) { return arr.position; } } return arr.position; } let o = 0; uint8ArrayExp.position = 0; while (o < uint8ArrayExp.length) { o = read(uint8ArrayExp); }
Custom Array
function read(arr) { while (arr.position < arr.length) { arr.position++; if (arr[arr.position] < 127) { return arr.position; } } return arr.position; } let o = 0; while (o < cArray.length) { o = read(cArray); }
Custom Uint Array
function read(arr) { while (arr.position < arr.length) { arr.position++; if (arr[arr.position] < 127) { return arr.position++; } } return arr.position; } let o = 0; while (o < cUint8Array.length) { o = read(cUint8Array, o); }

Run results for: Extending ArrayBufferView with Properties

How does extending an ArrayBufferView to add properties or functionality affect performance?

Regular Array

Uint Array

Uint Array Expando

Custom Array

Custom Uint Array