Benchmark: Extending ArrayBufferView with Properties

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); }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Regular Array
Uint Array
Uint Array Expando
Custom Array
Custom Uint Array

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated 26 days ago):

LLMs can make mistakes. Check important info.

Let's break down the benchmark and its various components.

**Benchmark Definition**

The benchmark is designed to test how extending an `ArrayBufferView` (such as `Uint8Array`) with custom properties or functionality affects performance. Specifically, it creates three types of arrays:

1. Regular Array (`Array`)
2. Uint Array (`Uint8Array`)
3. Custom Uint Array (`CustomUint8Array`, which extends `Uint8Array`)

Each array has a similar constructor and initialization process, but the key difference lies in how they access elements and perform operations.

**Options Compared**

The benchmark compares the performance of three different approaches:

1. **Regular Array (Array)**: Uses the standard array indexing syntax (`arr[pos]`) to access elements.
2. **Uint Array (Uint8Array)**: Uses the `position` property to keep track of the current index, but still uses standard array indexing syntax (`arr[pos]`) to access elements.
3. **Custom Uint Array (CustomUint8Array)**: Extends `Uint8Array` with a custom `position` property that increments and accesses elements using the same syntax as the regular array (`arr[arr.position]`). However, it also has an additional increment operation after returning the position.

**Pros and Cons of Different Approaches**

1. **Regular Array (Array)**:
	* Pros: Simple and intuitive indexing syntax.
	* Cons: May incur additional overhead due to slower access times compared to `Uint8Array`.
2. **Uint Array (Uint8Array)**:
	* Pros: Faster access times than regular arrays, thanks to the `position` property.
	* Cons: Requires manual management of the index increment and reset.
3. **Custom Uint Array (CustomUint8Array)**:
	* Pros: Combines the benefits of `Uint8Array` with custom indexing syntax, potentially reducing overhead.
	* Cons: Adds unnecessary complexity due to the custom `position` property and additional operations.

**Benchmark Results**

The latest benchmark results show that:

1. Custom Uint Array (`CustomUint8Array`) has the highest performance (508 MB/s) among all three options.
2. Uint Array (`Uint8Array`) is close behind, with a slightly lower performance (445 MB/s).
3. Regular Array (`Array`) performs the worst, likely due to slower access times.

**Conclusion**

The benchmark suggests that extending an `ArrayBufferView` with custom properties or functionality can lead to improved performance, especially when compared to using standard array indexing syntax. However, the added complexity of managing indices and incrementing/resetting positions may outweigh any benefits for some use cases.

Latest run results:

Run details: (Test run date: 3 years ago)

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

Browser/OS: Firefox 91 on Mac OS X 10.15

View result in a separate tab

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	50820496.0 Ops/sec
Custom Uint Array	44522384.0 Ops/sec

Related benchmarks:

Extending ArrayBufferView with Properties (version: 0)

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

Comparing performance of: Regular Array vs Uint Array vs Uint Array Expando vs Custom Array vs Custom Uint Array

Created: 3 years ago by: Registered User

Jump to the latest result

Regular Array

Uint Array

Uint Array Expando

Custom Array

Custom Uint Array

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated 26 days ago):