Benchmark: Access to Proxy vs Object vs Getters fixed

Script Preparation code:

object = { value: 'data' };
proxy = new Proxy(object, {})
proxyWithHandler = new Proxy(object, {
	get(target, prop, receiver) {
    	return Reflect.get(target, prop, receiver)
    }
})
objWithGetter = { _val: 'data', get value() { return this._val } }

Tests:

Object access
object.value;
Proxy access
proxy.value
Proxy with get handler access
proxyWithHandler.value
Object with getter
objWithGetter.value

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Object access
Proxy access
Proxy with get handler access
Object with getter

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_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/135.0.0.0 Safari/537.36

Browser/OS: Chrome 135 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
Object access	177267792.0 Ops/sec
Proxy access	68648184.0 Ops/sec
Proxy with get handler access	39520408.0 Ops/sec
Object with getter	64418728.0 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 JSON benchmark definition and explain what is being tested.

**Benchmark Definition**

The benchmark measures the performance of accessing properties on different types of objects in JavaScript: regular objects, proxies, and objects with getters.

**Script Preparation Code**

The script prepares three types of objects:

1. `object`: a regular object with a single property `value` containing the string `'data'`.
2. `proxy`: a proxy object created from the `object` using the `Proxy` constructor. The proxy has no handlers defined, meaning it delegates all operations to the underlying object.
3. `proxyWithHandler`: another proxy object created from the `object`, but this time with a getter handler defined for the `value` property. This means that when accessing `value` on the proxy object, it will use the `get` method of the getter handler instead of delegating to the underlying object.

**Html Preparation Code**

There is no HTML preparation code provided, which suggests that the benchmark is focused solely on JavaScript performance and does not involve DOM-related operations.

**Test Cases**

The individual test cases are designed to measure the performance of accessing properties on each type of object:

1. `object.value;` - accesses the `value` property on a regular object.
2. `proxy.value;` - accesses the `value` property on a proxy object without a getter handler.
3. `proxyWithHandler.value;` - accesses the `value` property on a proxy object with a getter handler.
4. `objWithGetter.value;` - accesses the `value` property on an object with a defined getter function.

**Library**

None of the test cases use any external libraries.

**Special JS Features or Syntax**

There are no special JavaScript features or syntax used in this benchmark, other than the use of the `Proxy` constructor and getter handlers. This suggests that the benchmark is designed to be language-agnostic and does not rely on specific features or implementations.

Now, let's discuss the pros and cons of each approach:

* **Regular Object (`object.value;`)**
	+ Pros: simple and straightforward access to properties.
	+ Cons: may incur overhead due to property lookup and iteration.
* **Proxy Object (`proxy.value;`)**
	+ Pros: delegates operations to underlying object, reducing overhead.
	+ Cons: may introduce additional indirection and complexity.
* **Proxy with Getter Handler (`proxyWithHandler.value;`)**
	+ Pros: allows for fine-grained control over property access, potentially improving performance.
	+ Cons: introduces additional complexity due to the getter handler.

Other alternatives that could be considered in a similar benchmark include:

* Using `Object.defineProperty` or other methods to create getters and setters on regular objects.
* Comparing performance with other types of objects, such as arrays or sets.
* Adding more complex scenarios, such as accessing properties with nested objects or arrays.

Keep in mind that the specific alternatives will depend on the goals and scope of the benchmark.

Related benchmarks:

Access to Proxy vs Object vs Getters fixed (version: 0)

Comparing performance of: Object access vs Proxy access vs Proxy with get handler access vs Object with getter

Created: 2 years ago by: Guest

Jump to the latest result

Object access

Proxy access

Proxy with get handler access

Object with getter

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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