Benchmark: Class field access speed v1

Script Preparation code:

class ValueHolder {
  #value;
  get value() {return this.#value;}
  set value(v) {this.#value = v;}
}
const holder = new ValueHolder();

function getValue1(x) {
  return holder.value;
}

function getValue2(x, anyHolder=holder) {
  return anyHolder.value;
}

function getValue3(x, anyHolder=holder) {
  const propName = "value";
  return anyHolder[propName];
}

function getValue4(x, anyHolder=holder, propName="value") {
  return anyHolder[propName];
}
               
function benchmark(func) {
  let x; 
  for (let i = 0; i < 1000000; i++) {
    x = func(i);
  }
  return x;
}

Tests:

Static object, static property
benchmark(getValue1)
Dynamic object, static property
benchmark(getValue2)
Dynamic object, const property
benchmark(getValue3)
Dynamic object, dynamic property
benchmark(getValue4)

Historical Performance Data aggregated from 5 community runs

Desktop Results:

Firefox 5 runs

Static object, static property

3K/s

Dynamic object, static property

2K/s

Dynamic object, const property

344/s

Dynamic object, dynamic property

317/s

Fastest: Static object, static property (10.1x faster)

View exact numbers

✓ Static object, static property: 3,194 ops/sec
• Dynamic object, static property: 1,726 ops/sec
• Dynamic object, const property: 344 ops/sec
• Dynamic object, dynamic property: 317 ops/sec

Results show median performance across all community submissions. Run this benchmark yourself to verify on your device.

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Static object, static property
Dynamic object, static property
Dynamic object, const property
Dynamic object, dynamic property

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:131.0) Gecko/20100101 Firefox/131.0

Browser/OS: Firefox 131 on Mac OS X 10.15

View result in a separate tab

Static object, static property

3K/s

Dynamic object, const property

344/s

Dynamic object, static property

343/s

Dynamic object, dynamic property

317/s

View exact numbers

Test name	Executions per second
✓ Static object, static property	3,194 Ops/sec
Dynamic object, const property	344 Ops/sec
Dynamic object, static property	343 Ops/sec
Dynamic object, dynamic property	317 Ops/sec

Autogenerated LLM Summary (model llama3.2:3b, generated one year ago):

LLMs can make mistakes. Check important info.

Let's break down the provided benchmark definition and test cases.

**Benchmark Definition**

The benchmark is designed to measure the speed of accessing class fields (properties) in JavaScript. The script preparation code defines a `ValueHolder` class with a private field `#value`. Three functions are created:

1. `getValue1(x)` returns the value of the static property `holder.value`.
2. `getValue2(x, anyHolder=holder)` returns the value of the dynamic object's static property using the `anyHolder` parameter.
3. `getValue3(x, anyHolder=holder)` returns the value of a const property using the `propName` variable.
4. `getValue4(x, anyHolder=holder, propName="value")` returns the value of a dynamic property using the `propName` parameter.

The benchmark function takes one argument, `func`, which is expected to be one of these four functions. The benchmark measures how many executions per second are performed by each function over 1 million iterations.

**Test Cases**

There are four test cases, each corresponding to a different access pattern:

1. **Static object, static property**: Accesses the static property `holder.value` using `getValue1`.
2. **Dynamic object, static property**: Accesses the dynamic object's static property using `getValue2`.
3. **Dynamic object, const property**: Accesses a const property using `getValue3`.
4. **Dynamic object, dynamic property**: Accesses a dynamic property using `getValue4`.

**Options Compared**

The benchmark compares four different access patterns:

1. **Static Property**: Directly accessing the static property `holder.value` (Test Case 1).
2. **Dynamic Object with Static Property**: Passing an object as an argument to access its static property (Test Case 2).
3. **Dynamic Object with Const Property**: Using a const variable to access a const property (Test Case 3).
4. **Dynamic Object with Dynamic Property**: Passing a string or variable as an argument to access a dynamic property (Test Case 4).

**Pros and Cons of Each Approach**

1. **Static Property**:
	* Pros: Direct and simple, likely optimized by the JavaScript engine.
	* Cons: May not be applicable in all situations where object creation is costly or complex.
2. **Dynamic Object with Static Property**:
	* Pros: Allows for flexible access to static properties across objects.
	* Cons: May incur overhead due to function call and parameter passing.
3. **Dynamic Object with Const Property**:
	* Pros: Similar to dynamic object with static property, but with a const variable.
	* Cons: Limited flexibility compared to dynamic object with dynamic property.
4. **Dynamic Object with Dynamic Property**:
	* Pros: Offers the most flexibility in accessing properties across objects.
	* Cons: May incur additional overhead due to string or variable lookup.

**Library and Special Features**

No specific libraries are mentioned, but the `#value` syntax is a shorthand for private fields in modern JavaScript (ECMAScript 2020+). The use of const variables (`const propName = "value";`) is also a good practice to ensure property accessibility is controlled.

**Alternatives**

Other alternatives could be considered, such as:

1. Using getters and setters to access properties.
2. Utilizing `this` keyword to access properties directly on the object.
3. Implementing a custom accessor or wrapper function for better performance optimization.

Keep in mind that these alternatives would depend on the specific requirements and constraints of the project.

Please let me know if you'd like further clarification or details on any aspect!

Class field access speed v1 (version: 1)

Comparing performance of: `Static object, static property vs Dynamic object, static property vs Dynamic object, const property vs Dynamic object, dynamic property`

Created: 2 years ago by: Registered User

Go to the latest result

Static object, static property

Dynamic object, static property

Dynamic object, const property

Dynamic object, dynamic property

Historical Performance Data aggregated from 5 community runs

Desktop Results:

Firefox 5 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated one year ago):

Class field access speed v1 (version: 1)

Comparing performance of: Static object, static property vs Dynamic object, static property vs Dynamic object, const property vs Dynamic object, dynamic property

Created: 2 years ago by: Registered User

Go to the latest result

Static object, static property

Dynamic object, static property

Dynamic object, const property

Dynamic object, dynamic property

Historical Performance Data aggregated from 5 community runs

Desktop Results:

Firefox 5 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated one year ago):

Related benchmarks

Comparing performance of: `Static object, static property vs Dynamic object, static property vs Dynamic object, const property vs Dynamic object, dynamic property`