Benchmark: uint8Array vs plain array, small, random get/set

Script Preparation code:

const uint8Array = new Uint8Array(81);
const simpleArray = new Array(81);
let temp = 0;
let r = 0;

for(let i = 0; i < 81; i++) {
  uint8Array[i] = simpleArray[i] = Math.floor(Math.random() * 2);
}

Tests:

uint8Array get/set
for (let i; i < 10000; i++) { r = Math.floor(Math.random() * 81); temp = uint8Array[r]; r = Math.floor(Math.random() * 81); uint8Array[r] = temp; }
plain array get/set
for (let i; i < 10000; i++) { r = Math.floor(Math.random() * 81); temp = simpleArray[r]; r = Math.floor(Math.random() * 81); simpleArray[r] = temp; }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
uint8Array get/set
plain array get/set

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 2 months ago)

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/132.0.0.0 Safari/537.36

Browser/OS: Chrome 132 on Windows

View result in a separate tab

Test name	Executions per second
uint8Array get/set	107680216.0 Ops/sec
plain array get/set	104558176.0 Ops/sec

Autogenerated LLM Summary (model gpt-4o-mini, generated 6 months ago):

LLMs can make mistakes. Check important info.

The benchmark described in the JSON evaluates the performance of two different types of array-like structures in JavaScript: `Uint8Array` and a plain JavaScript array. It specifically measures the efficiency of random read and write operations over a series of iterations.

### Options Compared

1. **`Uint8Array`**:
   - **Description**: This is a typed array in JavaScript that represents an array of 8-bit unsigned integers. It is a part of the ArrayBuffer family and is optimized for performance, especially in scenarios involving binary data.
   - **Purpose**: Typed arrays like `Uint8Array` are primarily used for handling raw binary data. They are particularly useful in web applications that require manipulation of binary data, like WebGL, image processing, or any operation involving low-level data manipulation.

2. **Plain Array**:
   - **Description**: This is the standard array interface in JavaScript, which can hold elements of any type. It is more flexible in terms of data types it can store (numbers, strings, objects, etc.) but can incur overhead due to dynamic resizing and type variance.
   - **Purpose**: Plain arrays are widely used throughout JavaScript applications and are suitable for more general use cases.

### Pros and Cons

#### Uint8Array
- **Pros**:
  - **Performance**: Typically faster for numerical operations due to its fixed size and the way the memory is structured.
  - **Memory Efficiency**: Takes up less space for numerical data than a plain array that can accommodate different data types.
  - **Data Handling**: Excellent for applications that require manipulation of binary data.

- **Cons**:
  - **Type Restriction**: Can only store 8-bit unsigned integers. This limits its flexibility compared to plain arrays.
  - **Less Common Use**: May not be as familiar to all developers, thus potentially increasing the complexity for general applications unrelated to binary data processing.

#### Plain Array
- **Pros**:
  - **Flexibility**: Can store items of any data type, making it versatile for various applications.
  - **Ease of Use**: Generally easier to use and understand, especially for those new to JavaScript.

- **Cons**:
  - **Performance Overhead**: Generally slower than typed arrays for numerical calculations due to dynamic resizing and type checks.
  - **Memory Usage**: Can consume more memory if storing large datasets of numbers due to its capability to hold different types.

### Other Considerations

1. **Benchmarking Context**: The benchmark is set for a total of 10,000 iterations for each array type, which provides a useful measure of performance in a controlled environment. However, performance may vary in real-world applications based on data size, number of elements processed, and specific use cases.

2. **Browser and Environment Variability**: The benchmarks were run in Firefox on a Windows desktop. Performance results can differ across different browsers and devices, so it's important to consider the specific environment when interpreting results.

### Alternatives

- **`Float32Array`**: If you need to handle floating-point numbers instead of integers, using `Float32Array` would be a good alternative, but with similar constraints regarding the type of data.
  
- **Regular Objects or Maps**: For key-value mappings, using plain objects or `Map` could provide alternatives with flexible keys and values, though these structures are not optimized for numerical operations like typed arrays.

- **Other Typed Arrays**: There are other typed arrays available such as `Int16Array`, `Uint16Array`, `Int32Array`, and so on, allowing for other integer sizes based on application requirements.

In summary, the benchmark compares `Uint8Array` against plain arrays to assess performance differences in random access patterns, highlighting the trade-offs between efficiency in numerical data handling and the flexibility of JavaScript's standard array.

Related benchmarks:

uint8Array vs plain array, small, random get/set (version: 2)

Test copying a random index to another random index on a small uint8Array vs a plain array

Comparing performance of: uint8Array get/set vs plain array get/set

Created: 6 months ago by: Registered User

Jump to the latest result

uint8Array get/set

plain array get/set

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model gpt-4o-mini, generated 6 months ago):