Benchmark: flat typed array vs 2d typed array

Script Preparation code:

var arrDim = 1000;


var clArr = new Array(arrDim);
for (var i = 0; i < arrDim; i++) {
    clArr[i] = new Uint8Array(arrDim);
}

clArr.getSlice = function(i) {
    return this[i];
}
clArr.setVal = function(i, j, val) {
    this[i][j] = val;
}
clArr.getVal = function(i, j) {
    return this[i][j];
}


var flArr = new Uint8Array(Math.pow(arrDim, 2));

flArr.getSlice = function(i) {
    var start = i*arrDim;
    return this.slice(start, start + arrDim);
}
flArr.setVal = function(i, j, val) {
    this[i*arrDim + j] = val;
}
flArr.getVal = function(i, j) {
    return this[i*arrDim + j];
}

Tests:

flat array set
flArr.setVal(123, 123, 1);
2d array set
clArr.setVal(123, 123, 1);
flat array get
flArr.getVal(123, 123);
2d array get
clArr.getVal(123, 123);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
flat array set
2d array set
flat array get
2d array get

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/133.0.0.0 Safari/537.36

Browser/OS: Chrome 133 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
flat array set	260144480.0 Ops/sec
2d array set	239926224.0 Ops/sec
flat array get	274478304.0 Ops/sec
2d array get	241388304.0 Ops/sec

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

LLMs can make mistakes. Check important info.

The benchmark titled "flat typed array vs 2d typed array" compares the performance of two different approaches to storing and accessing 2D array-like structures in JavaScript: a flat typed array (`flArr`) and a traditional 2-dimensional array constructed using arrays of `Uint8Array` (`clArr`).

### Approaches Compared:

1. **Flat Typed Array (`flArr`)**:
   - This approach utilizes a single, contiguous `Uint8Array` to represent a 2D array. Accessing elements involves computing a single index based on the current row and column.
   - Method Implementations:
     - `setVal(i, j, val)`: Sets the value at row `i`, column `j` by calculating the corresponding index.
     - `getVal(i, j)`: Retrieves the value from the calculated index.

2. **2D Typed Array (`clArr`)**:
   - This approach involves creating an array where each element is itself a `Uint8Array`, effectively simulating a 2D array. 
   - Method Implementations:
     - `setVal(i, j, val)`: Uses the array reference for the ith element to set the jth value.
     - `getVal(i, j)`: Retrieves the jth value from the ith `Uint8Array`.

### Pros and Cons:

#### Flat Typed Array (`flArr`):
- **Pros**:
  - **Memory Efficiency**: A flat array can be more memory efficient since it's a single contiguous block of memory. This can lead to better cache performance and reduces overhead from managing multiple arrays.
  - **Performance**: Generally faster for access and manipulation operations due to less indirection and benefit from better memory locality.
  
- **Cons**:
  - **Complexity in Indexing**: Index calculations increase complexity when determining row-column access.
  - **Less Intuitive**: May be harder to visualize and manage for developers expecting a straightforward 2D structure.

#### 2D Typed Array (`clArr`):
- **Pros**:
  - **Intuitive Structure**: Easier to understand and organize. Accessing elements feels more natural when thinking in 2D terms.
  - **Simplicity in Use**: Intuitive access via row and column notation directly corresponds to the familiar conceptual model of 2D arrays.
  
- **Cons**:
  - **Memory Overhead**: May involve more memory overhead due to additional reference objects (multiple `Uint8Array` instances).
  - **Performance**: Typically slower because of the additional indirection and potential fragmentation in memory access.

### Benchmark Test Cases:
The test cases benchmark the effectiveness of element retrieval and modification for both structures:
1. **`flArr.setVal(123, 123, 1)`**: Measures the performance of setting a value in the flat array.
2. **`clArr.setVal(123, 123, 1)`**: Measures the performance of setting a value in the 2D array.
3. **`flArr.getVal(123, 123)`**: Measures the performance of retrieving a value from the flat array.
4. **`clArr.getVal(123, 123)`**: Measures the performance of retrieving a value from the 2D array.

### Benchmark Results Summary:
The benchmark results indicate that the flat array generally performs better than the 2D array, both for setting and getting values. For example:
- Best performance seen for `flArr.getVal` at approximately 274 million executions per second.
- The 2D array (`clArr`) trails behind, but is slower by relatively small margins.

### Other Considerations:
- **JavaScript Typed Arrays**: Both `flArr` and `clArr` use `Uint8Array`, a part of JavaScript's Typed Arrays feature designed for efficient binary data manipulation. Typed arrays enable direct manipulation of binary data in memory, offering performance improvements for numeric computations.
  
### Alternatives:
Other alternatives for implementing and optimizing 2D array structures include:
- **Native JavaScript Arrays**: Simply using arrays of arrays, which could be less performant but simpler to use and understand.
- **Other Typed Array Types**: Using typed arrays like `Float32Array` for different numeric ranges.
- **External Libraries**: Leveraging libraries like NumPy (in Python) for efficient numerical computing or other JavaScript libraries that handle matrix operations efficiently.

In conclusion, the choice between flat typed arrays and 2-dimensional arrays should be guided by specific use cases and performance requirements, weighing the trade-offs between simplicity and efficiency.

Related benchmarks:

flat typed array vs 2d typed array (version: 1)

Comparing performance of: flat array set vs 2d array set vs flat array get vs 2d array get

Created: 2 months ago by: Guest

Jump to the latest result

flat array set

2d array set

flat array get

2d array get

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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