Benchmark: get x versus array[0] versus Float32Array versus Float32Array get versus Int32Array versus Int32Array extended

Script Preparation code:

class Float32ArrayExtended extends Float32Array {
  
  constructor (val) {
    super(1);
    this[0] = val;
  }

  get x () { return this[0]; }
  set x (v) { this[0] = v; }
}

class Int32ArrayExtended extends Int32Array {
  
  constructor (val) {
    super(1);
    this[0] = val;
  }

  get x () { return this[0]; }
  set x (v) { this[0] = v; }
}

const size = 10000;
const array = new Array(16).fill(1);
const arrayEF32 = new Float32ArrayExtended (16);
const arrayF32 = new Float32Array (16);
const arrayEI32 = new Int32ArrayExtended (16);
const arrayI32 = new Int32Array (16);

const obj = {
    get x() {
        return array[0];
    },

    set x(value) {
        array[0] = value;
    }
};

Tests:

array[0]
let sum = 0; for (let i = 0; i < size; i++) { array[0] = Math.random () * 1000; sum += array[0]; }
set / get
let sum = 0; for (let i = 0; i < size; i++) { obj.x = Math.random () * 1000; sum += obj.x; }
float 32
let sum = 0; for (let i = 0; i < size; i++) { arrayF32[0] = Math.random () * 1000; sum += arrayF32[0]; }
extended float 32
let sum = 0; for (let i = 0; i < size; i++) { arrayEF32.x = Math.random () * 1000; sum += arrayEF32.x; }
int 32
let sum = 0; for (let i = 0; i < size; i++) { arrayI32[0] = Math.random () * 1000; sum += arrayI32[0]; }
extended int 32
let sum = 0; for (let i = 0; i < size; i++) { arrayEI32.x = Math.random () * 1000; sum += arrayEI32.x; }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
array[0]
set / get
float 32
extended float 32
int 32
extended int 32

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: one month ago)

User agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/133.0.0.0 Safari/537.36

Browser/OS: Chrome 133 on Linux

View result in a separate tab

Test name	Executions per second
array[0]	5981.4 Ops/sec
set / get	592.7 Ops/sec
float 32	5827.6 Ops/sec
extended float 32	5998.3 Ops/sec
int 32	5953.3 Ops/sec
extended int 32	5886.8 Ops/sec

Autogenerated LLM Summary (model gpt-4o-mini, generated one month ago):

LLMs can make mistakes. Check important info.

The benchmark outlined in the provided JSON evaluates the performance of different approaches to accessing and modifying array elements in JavaScript. Here, it compares regular JavaScript arrays, different types of typed arrays, and the performance implications of using getters and setters with property access.

### Options Compared

1. **Regular Array (`array[0]`)**:
   - This is a standard JavaScript array. The test accesses and modifies the first element directly.
   - **Pros**: Simple and straightforward to use; suitable for general purposes.
   - **Cons**: Regular arrays can be slower than typed arrays for numerical calculations due to their dynamic nature and lack of type constraints.

2. **Getter/Setter on an Object (`obj.x`)**:
   - An object `obj` has a property with a getter and setter for `x`, which accesses the first element of the regular array.
   - **Pros**: Facilitates encapsulation and provides more control over how values are accessed and modified.
   - **Cons**: Slightly slower due to the overhead of function calls (getter/setter) compared to direct access.

3. **Typed Array (`Float32Array`)**:
   - A typed array that stores 32-bit floating point numbers. The test accesses and modifies the first element directly.
   - **Pros**: Optimized for performance in numerical computations; allows for better memory layout and type safety compared to regular arrays.
   - **Cons**: Less flexible than regular arrays (e.g., cannot store mixed types); must be initialized with a size.

4. **Extended Typed Array (`Float32ArrayExtended`)**:
   - A custom class that extends `Float32Array` to include a getter/setter for accessing the first element with a property `x`.
   - **Pros**: Combines the advantages of typed arrays with the flexibility of property access through getters/setters.
   - **Cons**: May introduce performance overhead due to the getter/setter abstraction.

5. **Int32Array**:
   - Similar to `Float32Array`, but this typed array specifically holds 32-bit signed integers.
   - **Pros**: Useful when only integer values are needed; offers performance benefits similar to `Float32Array`.
   - **Cons**: Like other typed arrays, it doesn’t support mixed types.

6. **Extended Int32Array (`Int32ArrayExtended`)**:
   - A custom class extending `Int32Array`, adding a getter/setter for the first element.
   - **Pros**: Provides similar advantages to `Float32ArrayExtended`, allowing property-oriented access while maintaining the benefits of a typed array.
   - **Cons**: Possible performance trade-offs due to the use of getters/setters.

### Performance Findings

Based on the latest benchmark results, the following can be observed:

- **Best Performing**: The `extended float 32` version topped the performance with around 5998 executions per second, suggesting that the addition of a getter/setter does not significantly detract from the performance of `Float32Array`.
- The direct access of the regular array (`array[0]`) performed slightly slower, yet still competitive, at around 5981 executions per second.
- The performance of `Int32Array` and its extended version is impressive as well, but it is noteworthy that the getter/setter approach for both integer types was among the slower options.
- The getter/setter approach in general (`set / get`) yielded significantly lower performance, indicating the overhead it brings compared to direct property access.

### Alternatives to Consider

In addition to the approaches tested:

- **Array Buffers**: At a lower level than typed arrays, `ArrayBuffer` instances can be created for precise control over memory, which can be useful for advanced numerical computing.
- **SharedArrayBuffer**: Useful in multi-threaded environments (such as Web Workers) which can help with performance in concurrent computing scenarios by allowing shared access to binary data.
- **Libraries**: Libraries like `lodash` can optimize certain operations over arrays, though they often come with overhead. Consideration could be given to frameworks like `TensorFlow.js` which utilize typed arrays effectively for numerical computations.

In conclusion, this benchmark effectively illustrates the trade-offs between using arrays and typed arrays with direct access versus the implementation of custom getter/setter properties. Performance varies based on the choice made, and decisions should be guided by specific application needs, especially concerning numerical computing versus general purpose programming.

Related benchmarks:

get x versus array[0] versus Float32Array versus Float32Array get versus Int32Array versus Int32Array extended (version: 1)

Comparing performance of: array[0] vs set / get vs float 32 vs extended float 32 vs int 32 vs extended int 32

Created: one month ago by: Guest

Jump to the latest result

array[0]

set / get

float 32

extended float 32

int 32

extended int 32

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model gpt-4o-mini, generated one month ago):