Benchmark: simple versus 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);
let x = 1;

const obj = {
    get x() {
        return array[0];
    },

    set x(value) {
        array[0] = value;
    }
};

​x
 
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];
}

 
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;
}

 
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];
}

 
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;
}

 
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];
}

 
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;
}

 
let sum = 0;for (let i = 0; i < size; i++) {    arrayEI32.x = Math.random () * 1000;    sum += arrayEI32.x;}

simple

let sum = 0;
for (let i = 0; i < size; i++) {
    x = Math.random () * 1000;
    sum += x;
}

 
let sum = 0;for (let i = 0; i < size; i++) {    x = Math.random () * 1000;    sum += x;}

array[0] 2

let sum = 0;
for (let i = 0; i < size; i++) {
    array[0] = Math.random () * 1000;
    sum += array[0];
}

 
let sum = 0;for (let i = 0; i < size; i++) {    array[0] = Math.random () * 1000;    sum += array[0];}

simple 2

let sum = 0;
for (let i = 0; i < size; i++)
    sum += Math.random () * 1000;

 
let sum = 0;for (let i = 0; i < size; i++)    sum += Math.random () * 1000;

simple 3

let sum = 0;
for (let i = 0; i < size; i++) {
    const x = Math.random () * 1000;
    sum += x;
}

 
let sum = 0;for (let i = 0; i < size; i++) {    const x = Math.random () * 1000;    sum += x;}

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Experimental features:

Memory measurements supported only in Chrome.
For precise memory measurements Chrome must be launched with --enable-precise-memory-info flag.
More information: Monitoring JavaScript Memory

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]	9814.5 Ops/sec
set / get	1147.0 Ops/sec
float 32	9300.4 Ops/sec
extended float 32	9258.9 Ops/sec
int 32	9182.1 Ops/sec
extended int 32	9053.8 Ops/sec
simple	1093.6 Ops/sec
array[0] 2	9794.5 Ops/sec
simple 2	12068.7 Ops/sec
simple 3	12146.3 Ops/sec

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

The benchmark being analyzed compares several approaches for accessing and manipulating data in JavaScript, particularly with respect to performance. The specific options tested include standard JavaScript arrays, TypedArrays (Float32Array and Int32Array), extended version of TypedArrays incorporating getter/setter properties, and simple variable assignments. Below is a detailed breakdown of each tested approach and their respective pros and cons.

Tested Approaches

Simple Variable Assignment (simple, simple 2, simple 3)
- Description: These benchmarks simply assign a random value to a variable and sum it.
- Performance: Tends to be the fastest method, achieving the highest execution rates.
- Pros: Very straightforward and efficient for simple operations, with low overhead.
- Cons: Limited in complexity; not suitable for data structures requiring indexing.
Direct Array Access (array[0], array[0] 2)
- Description: These tests involve accessing and modifying the first element of a regular JavaScript array.
- Performance: Moderate execution speed. Results show better performance than complex object accesses but worse than direct variable assignments.
- Pros: Arrays provide a convenient structure for managing collections of data.
- Cons: Overhead associated with accessing an indexed property; slower than simple variable operations.
Getters and Setters with Object (set / get)
- Description: This tests the use of a JavaScript object with getter and setter methods to access and modify a value.
- Performance: This approach dramatically reduces performance compared to direct access methods due to the overhead of function calls for accessing properties.
- Pros: Provides encapsulation and control over how values are set and retrieved, supporting validation or change notifications.
- Cons: Significant performance penalty; not ideal for performance-critical applications.
TypedArray (float 32, int 32)
- Description: These tests utilize Float32Array and Int32Array, which are specialized arrays for handling numbers efficiently.
- Performance: Moderate; performs better than plain arrays and getter/setter use due to optimized memory allocation and access patterns.
- Pros: Efficient for numerical computations as they use less memory and can improve performance due to lower overhead.
- Cons: Limited to numeric types; allows less flexibility than standard arrays for mixed data types or complex structures.
Extended TypedArray (extended float 32, extended int 32)
- Description: This includes the same functionality as the standard TypedArrays but adds custom getter/setter properties via class extension (Float32ArrayExtended and Int32ArrayExtended).
- Performance: Similar to TypedArray performance but likely slightly worse due to the overhead of using getters and setters.
- Pros: Provides compatibility with object-based APIs while still benefiting from the performance characteristics of TypedArrays.
- Cons: Adds additional complexity and slight performance overhead compared to using TypedArrays directly. May not show performance benefits for all use cases.

Other Considerations

Performance Variability: The performance results can vary based on various factors, including the JavaScript engine in use, available optimization options, and the specific browser or platform on which the benchmarks are executed.
Use Case Suitability: While simpler variable assignments excel in pure speed, leveraging arrays or TypedArrays might be necessary depending on the requirement for data structure management and numerical calculations.
Memory Management: TypedArrays can be more memory efficient particularly for large datasets, which may have ramifications for applications expecting high-throughput numeric computations.

Alternatives

Immutable Data Structures: Libraries like Immutable.js can be employed to manage collections in a predictable way, although they may have performance trade-offs compared to mutable structures.
Maps and Sets: These data structures might provide better key-value pair management or unique item handling but can perform differently based on the operations being conducted.
Using WebAssembly: For performance-sensitive operations, compiling portions of code to WebAssembly may offer significant performance improvements, particularly for numerical computations.

In summary, this benchmark studies several approaches to data access and manipulation in JavaScript, highlighting their performance characteristics, underlying complexities, and the best use cases for each method. The findings are essential for making informed decisions about which structures or techniques to use, especially in performance-critical applications.

LLMs can make mistakes. Check important info.

### Tested Approaches

1. **Simple Variable Assignment (`simple`, `simple 2`, `simple 3`)**
   - **Description:** These benchmarks simply assign a random value to a variable and sum it. 
   - **Performance:** Tends to be the fastest method, achieving the highest execution rates.
   - **Pros:** Very straightforward and efficient for simple operations, with low overhead.
   - **Cons:** Limited in complexity; not suitable for data structures requiring indexing.

2. **Direct Array Access (`array[0]`, `array[0] 2`)**
   - **Description:** These tests involve accessing and modifying the first element of a regular JavaScript array.
   - **Performance:** Moderate execution speed. Results show better performance than complex object accesses but worse than direct variable assignments.
   - **Pros:** Arrays provide a convenient structure for managing collections of data.
   - **Cons:** Overhead associated with accessing an indexed property; slower than simple variable operations.

3. **Getters and Setters with Object (`set / get`)**
   - **Description:** This tests the use of a JavaScript object with getter and setter methods to access and modify a value.
   - **Performance:** This approach dramatically reduces performance compared to direct access methods due to the overhead of function calls for accessing properties.
   - **Pros:** Provides encapsulation and control over how values are set and retrieved, supporting validation or change notifications.
   - **Cons:** Significant performance penalty; not ideal for performance-critical applications.

4. **TypedArray (`float 32`, `int 32`)**
   - **Description:** These tests utilize `Float32Array` and `Int32Array`, which are specialized arrays for handling numbers efficiently.
   - **Performance:** Moderate; performs better than plain arrays and getter/setter use due to optimized memory allocation and access patterns.
   - **Pros:** Efficient for numerical computations as they use less memory and can improve performance due to lower overhead.
   - **Cons:** Limited to numeric types; allows less flexibility than standard arrays for mixed data types or complex structures.

5. **Extended TypedArray (`extended float 32`, `extended int 32`)**
   - **Description:** This includes the same functionality as the standard TypedArrays but adds custom getter/setter properties via class extension (`Float32ArrayExtended` and `Int32ArrayExtended`).
   - **Performance:** Similar to TypedArray performance but likely slightly worse due to the overhead of using getters and setters.
   - **Pros:** Provides compatibility with object-based APIs while still benefiting from the performance characteristics of TypedArrays.
   - **Cons:** Adds additional complexity and slight performance overhead compared to using TypedArrays directly. May not show performance benefits for all use cases.

### Other Considerations
- **Performance Variability:** The performance results can vary based on various factors, including the JavaScript engine in use, available optimization options, and the specific browser or platform on which the benchmarks are executed.
- **Use Case Suitability:** While simpler variable assignments excel in pure speed, leveraging arrays or TypedArrays might be necessary depending on the requirement for data structure management and numerical calculations.
- **Memory Management:** TypedArrays can be more memory efficient particularly for large datasets, which may have ramifications for applications expecting high-throughput numeric computations.
  
### Alternatives
1. **Immutable Data Structures:** Libraries like Immutable.js can be employed to manage collections in a predictable way, although they may have performance trade-offs compared to mutable structures.
2. **Maps and Sets:** These data structures might provide better key-value pair management or unique item handling but can perform differently based on the operations being conducted.
3. **Using WebAssembly:** For performance-sensitive operations, compiling portions of code to WebAssembly may offer significant performance improvements, particularly for numerical computations.

Related benchmarks:

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