Benchmark: Extending ArrayBufferView

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

​x
 
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;}

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

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

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

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

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

 
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

Experimental features:

Memory measurements supported only in Chrome.
For precise memory measurements Chrome must be launched with --enable-precise-memory-info flag.
More information: Monitoring JavaScript Memory

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

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/14.1.1 Safari/605.1.15

Browser/OS: Safari 14 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
Regular Array	938.6 Ops/sec
Uint Array	939.6 Ops/sec
Uint Array Expando	875.0 Ops/sec
Custom Array	3601176.5 Ops/sec
Custom Uint Array	3610304.0 Ops/sec

Autogenerated LLM Summary (model llama3.2:3b, generated 4 months ago):

Measuring performance differences between various approaches to extending ArrayBufferView is a complex task, as it depends on the specific use case and requirements. Here's a breakdown of what's being tested:

Main Variables:

Buffer type: Four types of buffers are being compared:
- Uint8Array: A typed array for 8-bit unsigned integers.
- Custom CustomUint8Array (CUsU) which extends Uint8Array with additional functionality (explained later).
- Custom CustomArray (CA) which extends the built-in Array type with a custom implementation.
Implementation: The four test cases use different read functions to traverse the buffer, each with its own optimization:
- Regular Array: A straightforward loop that checks for the first byte under 127.
- Uint Array: Similar to Regular Array, but optimized for Uint8Array.
- Uint Array Expando (CUsU): The same as Regular Array, but uses the custom CUsU implementation.
- Custom Array: Uses a custom implementation with an additional check.

CustomUint8Array (CUsU) Purpose: The CustomUint8Array extension provides a lightweight way to add functionality to Uint8Array without creating a new object. It achieves this by adding a position property and overriding the basic operations of Uint8Array, such as indexing and slicing. The goal is to optimize performance by allowing developers to take advantage of existing Uint8Array implementations while still providing some custom functionality.

Performance Considerations:

Cache locality: For buffers with sequential elements (like our random values), access patterns that align closely with the buffer's layout are more cache-efficient, resulting in faster performance.
Branch prediction: Modern CPUs use branch prediction to improve instruction-level parallelism. In our case, the number of branches in each test function can affect performance.

Recent Benchmark Results:

The latest benchmark results show that:

CustomUint8Array (CUsU) performs best across all platforms and tests, with an average execution rate of around 3.6 million executions per second.
Custom Array (CA) follows closely behind, but lags about 50% in performance compared to CUsU.
Regular Array (RA) and Uint Array (UA) have significantly lower performance rates.

Insights:

Optimizing buffer access patterns is crucial for good performance.
The CustomUint8Array extension provides a lightweight way to optimize Uint8Array operations while still maintaining compatibility with existing implementations.
Implementing custom logic can lead to better performance when implemented correctly, but it requires careful consideration of cache locality and branch prediction.

When evaluating these results, keep in mind that:

Performance differences are typically smaller than absolute values (e.g., millisecond-level improvements).
Optimization techniques can have varying impacts across different platforms, hardware configurations, and use cases.
The best approach for a specific problem depends on the trade-offs between ease of implementation, compatibility, and performance.

To get the most out of these results:

Analyze your specific requirements and identify areas where optimization is possible.
Experiment with different buffer access patterns and implementations to find what works best for your use case.
Consider using established libraries or frameworks that provide optimized buffer implementations (e.g., WebAssembly) when performance becomes a top priority.

By understanding these factors, you can develop more effective strategies for optimizing your own performance-critical code.

LLMs can make mistakes. Check important info.

**Main Variables:**

1. **Buffer type**: Four types of buffers are being compared:
	* `Uint8Array`: A typed array for 8-bit unsigned integers.
	* Custom `CustomUint8Array` (CUsU) which extends `Uint8Array` with additional functionality (explained later).
	* Custom `CustomArray` (CA) which extends the built-in `Array` type with a custom implementation.
2. **Implementation**: The four test cases use different read functions to traverse the buffer, each with its own optimization:
	* Regular Array: A straightforward loop that checks for the first byte under 127.
	* Uint Array: Similar to Regular Array, but optimized for Uint8Array.
	* Uint Array Expando (CUsU): The same as Regular Array, but uses the custom CUsU implementation.
	* Custom Array: Uses a custom implementation with an additional check.

**CustomUint8Array (CUsU) Purpose:**
The `CustomUint8Array` extension provides a lightweight way to add functionality to Uint8Array without creating a new object. It achieves this by adding a `position` property and overriding the basic operations of Uint8Array, such as indexing and slicing. The goal is to optimize performance by allowing developers to take advantage of existing Uint8Array implementations while still providing some custom functionality.

**Performance Considerations:**

* **Cache locality**: For buffers with sequential elements (like our random values), access patterns that align closely with the buffer's layout are more cache-efficient, resulting in faster performance.
* **Branch prediction**: Modern CPUs use branch prediction to improve instruction-level parallelism. In our case, the number of branches in each test function can affect performance.

**Recent Benchmark Results:**

The latest benchmark results show that:

* `CustomUint8Array` (CUsU) performs best across all platforms and tests, with an average execution rate of around 3.6 million executions per second.
* Custom Array (`CA`) follows closely behind, but lags about 50% in performance compared to CUsU.
* Regular Array (`RA`) and Uint Array (`UA`) have significantly lower performance rates.

**Insights:**

1. Optimizing buffer access patterns is crucial for good performance.
2. The `CustomUint8Array` extension provides a lightweight way to optimize Uint8Array operations while still maintaining compatibility with existing implementations.
3. Implementing custom logic can lead to better performance when implemented correctly, but it requires careful consideration of cache locality and branch prediction.

When evaluating these results, keep in mind that:

* Performance differences are typically smaller than absolute values (e.g., millisecond-level improvements).
* Optimization techniques can have varying impacts across different platforms, hardware configurations, and use cases.
* The best approach for a specific problem depends on the trade-offs between ease of implementation, compatibility, and performance.

To get the most out of these results:

1. Analyze your specific requirements and identify areas where optimization is possible.
2. Experiment with different buffer access patterns and implementations to find what works best for your use case.
3. Consider using established libraries or frameworks that provide optimized buffer implementations (e.g., WebAssembly) when performance becomes a top priority.

By understanding these factors, you can develop more effective strategies for optimizing your own performance-critical code.

Related benchmarks:

Extending ArrayBufferView (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: Guest

Jump to the latest result