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

HTML Preparation code:

<span id="foo"></span>

Script Preparation code:

const span = document.getElementById ("foo");

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);
let x = 1;

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]; } foo.innerText = sum;
set / get
let sum = 0; for (let i = 0; i < size; i++) { obj.x = Math.random () * 1000; sum += obj.x; } foo.innerText = sum;
float 32
let sum = 0; for (let i = 0; i < size; i++) { arrayF32[0] = Math.random () * 1000; sum += arrayF32[0]; } foo.innerText = sum;
extended float 32
let sum = 0; for (let i = 0; i < size; i++) { arrayEF32.x = Math.random () * 1000; sum += arrayEF32.x; } foo.innerText = sum;
int 32
let sum = 0; for (let i = 0; i < size; i++) { arrayI32[0] = Math.random () * 1000; sum += arrayI32[0]; } foo.innerText = sum;
extended int 32
let sum = 0; for (let i = 0; i < size; i++) { arrayEI32.x = Math.random () * 1000; sum += arrayEI32.x; } foo.innerText = sum;
simple
let sum = 0; for (let i = 0; i < size; i++) { x = Math.random () * 1000; sum += x; } foo.innerText = sum;
array[0] 2
let sum = 0; for (let i = 0; i < size; i++) { array[0] = Math.random () * 1000; sum += array[0]; } foo.innerText = sum;
simple 2
let sum = 0; for (let i = 0; i < size; i++) sum += Math.random () * 1000; foo.innerText = sum;
simple 3
let sum = 0; for (let i = 0; i < size; i++) { const x = Math.random () * 1000; sum += x; } foo.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 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/133.0.0.0 Safari/537.36

Browser/OS: Chrome 133 on Windows

View result in a separate tab

Test name	Executions per second
array[0]	9386.4 Ops/sec
set / get	1117.2 Ops/sec
float 32	8900.2 Ops/sec
extended float 32	9090.9 Ops/sec
int 32	8791.2 Ops/sec
extended int 32	8863.5 Ops/sec
simple	1145.0 Ops/sec
array[0] 2	9573.9 Ops/sec
simple 2	11528.8 Ops/sec
simple 3	11625.6 Ops/sec

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

LLMs can make mistakes. Check important info.

The provided benchmark tests various approaches to accessing and modifying data in JavaScript, particularly with respect to arrays and typed arrays. It explores how different methods perform in terms of execution speed when repeatedly manipulating the same underlying value. Here's a breakdown of the test cases, their pros and cons, and considerations:

### Test Cases and Approaches

1. **Simple Assignment** (`simple`, `simple 2`, `simple 3`):
   - **Description**: Directly assigns a random value to a variable `x` and accumulates the sum.
   - **Pros**: 
     - Fastest due to minimal overhead.
     - No additional structures; straightforward and easy to understand.
   - **Cons**: 
     - Limited use case; lacks any array interaction.

2. **Array Access** (`array[0]`, `array[0] 2`):
   - **Description**: Accesses the first element of a regular JavaScript array, modifies it, and sums it up.
   - **Pros**: 
     - Familiar syntax for most developers.
     - Allows storage of multiple elements.
   - **Cons**: 
     - Slightly slower than direct variable access due to array overhead.
     - Arrays have a dynamic nature that might introduce additional performance costs in larger contexts.

3. **Object Getter/Setter** (`set / get`):
   - **Description**: Uses a JavaScript object with getter/setter methods to encapsulate access to an array value.
   - **Pros**: 
     - Provides encapsulation, which can be a cleaner design.
     - Allows for potential additional logic in the getter/setter.
   - **Cons**: 
     - Additional overhead from method calls during each access.
     - Potentially slower due to wrapping in an object.

4. **Typed Arrays**:
   - **Float32Array** (`float 32`):
     - **Description**: A typed array specifically for 32-bit floating point numbers. The test accesses and modifies the first element.
     - **Pros**: 
       - Optimized for memory and performance for numerical operations.
       - Consistent and efficient representation of numbers.
     - **Cons**: 
       - Less flexible than regular arrays.
       - Limited to specific types and sizes, which can lead to more complexity in type handling.

- **Extended Float32Array** (`extended float 32`):
     - **Description**: Extends `Float32Array` with a getter/setter property `x` to access the first element.
     - **Pros**:
       - Combines benefits of typed arrays and encapsulation.
       - Provides control over the property with potential additional logic.
     - **Cons**:
       - Additional overhead for property access.
       - Inherits limitations of typed arrays.

- **Int32Array** (`int 32`):
     - **Description**: Similar to `Float32Array`, but specifically for 32-bit signed integers.
     - **Pros**: 
       - Optimized for integer-based computations.
     - **Cons**: 
       - Same limitations and complexities as `Float32Array`.

- **Extended Int32Array** (`extended int 32`):
     - **Description**: Extends `Int32Array` with getter/setter `x` to interact with the first element.
     - **Pros**:
       - Similar advantages to extended float arrays.
     - **Cons**:
       - Faces the same overhead and limitations.

### Comparisons and Considerations

- **Performance**: The `simple` cases perform the fastest, demonstrating the overhead of accessing properties and managing arrays or typed arrays. Direct variable manipulation leads to optimized speed.
- **Encapsulation vs. Speed**: Using getters and setters introduces a trade-off between design clarity and performance. If maintainability and readability are paramount, the overhead of these features might be acceptable.
- **Typed Arrays**: They offer performance benefits for numerical data processing, particularly relevant in scenarios where large datasets or mathematical computations are common, often seen in graphical applications or scientific computations.
- **Instance Classes**: The extended typed arrays show how JavaScript can utilize class-based paradigms to extend base functionalities, allowing for more structured code at the potential cost of performance due to method call overhead.

### Alternatives

- **Using Functions**: Rather than using a class-based approach, simple functions can encapsulate behavior around array access.
- **WebAssembly**: For computationally intensive tasks, WebAssembly can be considered, allowing code in languages like C/C++ to run in the browser with near-native performance.
- **Different Data Structures**: Consider using other data structures, like Maps or Sets, if unique or associative behavior is needed, though they come with their own overhead and complexities.

Overall, this benchmark provides valuable insights into the performance characteristics and trade-offs involved in different data manipulation techniques within JavaScript. The right approach largely depends on the specific use case and the requirements for performance versus maintainability.

Related benchmarks:

teardown + simple versus 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 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):