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

HTML Preparation code:

<span></span>

Script Preparation code:

let span = document.body.querySelector("span");

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]; }let
  set x (v) { this[0] = v; }
}

const size = 100000;
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);
let x = 1;

const obj = {
    get x() {
        return array[0];
    },

    set x(value) {
        array[0] = value;
    }
};

let sum = 0;

Tests:

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

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
simple
array[0] 2
simple 2
simple 3

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]	68.9 Ops/sec
set / get	32.5 Ops/sec
float 32	63.0 Ops/sec
extended float 32	70.8 Ops/sec
int 32	72.5 Ops/sec
extended int 32	77.8 Ops/sec
simple	40.5 Ops/sec
array[0] 2	75.7 Ops/sec
simple 2	77.2 Ops/sec
simple 3	79.2 Ops/sec

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

LLMs can make mistakes. Check important info.

This benchmark compares the performance of various methods for accessing and modifying data in different array-like structures in JavaScript, specifically focusing on:

1. **Simple Variable Assignment**
2. **Standard Array (`Array`)**
3. **Typed Arrays (`Float32Array` and `Int32Array`)**
4. **Extended Typed Arrays with Custom Getters/Setters**

### Test Case Descriptions and Comparisons

1. **Simple Assignment (`simple`, `simple 2`, `simple 3`)**:
   - Tests direct assignment to a variable (`x`) and summing values in a loop.
   - **Pros**: Fastest performance as it doesn't involve any data structures; just operates on regular JavaScript variables.
   - **Cons**: Limited in capability compared to using arrays, especially for large datasets.

2. **Array Access (`array[0]`, `array[0] 2`)**:
   - Measures the performance of updating and accessing the first element of a standard JavaScript array.
   - **Pros**: Standard and straightforward; easy to implement and read.
   - **Cons**: Arrays can exhibit slower performance compared to typed arrays due to additional overhead in handling mixed types and methods.

3. **Float32Array**:
   - This is a typed array designed to hold 32-bit floating-point numbers. The benchmark tests accessing and modifying the first element.
   - **Pros**: More memory efficient and performant in numerical operations due to optimized handling for numbers.
   - **Cons**: Limited to numbers only and does not allow for other data types.

4. **Float32ArrayExtended**:
   - An extension of `Float32Array` that adds custom getters and setters for handling the first element.
   - **Pros**: Allows for a more intuitive interface for modification using properties instead of direct indexing, which can improve code readability.
   - **Cons**: The overhead of calling a getter/setter can lead to performance penalties compared to direct access.

5. **Int32Array**:
   - Similar to `Float32Array`, this is used for handling 32-bit integer values and is benchmarked for access and mutation.
   - **Pros**: Efficient for storing integers and performing arithmetic operations (like in applications that require large datasets of integer values).
   - **Cons**: Like `Float32Array`, it is restrictive in terms of type flexibility.

6. **Int32ArrayExtended**:
   - An extension of `Int32Array` with custom getter and setter methods.
   - **Pros**: Same benefits as `Float32ArrayExtended`, enhancing usability with property syntax.
   - **Cons**: Similar performance considerations as `Float32ArrayExtended due to the overhead of getters/setters.

7. **Object with Getters/Setters (`set / get`)**:
   - Involves using an object with a getter and setter for property `x` to access and modify an internal array.
   - **Pros**: Uses encapsulation via an object while allowing property-based access.
   - **Cons**: Can be slower due to the dynamic nature of object properties compared to direct array access.

### Performance Considerations

The benchmark indicates the trade-offs between performance and usability. Direct assignments to variables or accessed through simple arrays yield better performance but may sacrifice readability or flexibility. In contrast, extended classes that use getters/setters provide clear, maintainable code, but at the cost of speed because of the function overhead.

### Alternatives

- **Using Immutable Data Structures**: Libraries like Immer.js or Immutable.js can be used for maintaining immutability in state management.
- **Typed Arrays versus Array Buffers**: For efficient binary data handling, low-level `ArrayBuffer` can be preferred, often paired with typed arrays.
- **Transpiling to Higher-Level Languages**: If performance is a critical concern, converting critical sections into a language such as WebAssembly can provide performance improvements.

In conclusion, this benchmark serves as an excellent foundation for understanding the performance implications of using different types of data access patterns and structures in JavaScript, particularly for scenarios that require high-performance numeric computations. Each approach has its benefits and drawbacks, and the best choice highly depends on the specific requirements of the application.

Related benchmarks:

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

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

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

simple

array[0] 2

simple 2

simple 3

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):