Benchmark: Access to Proxy vs Object vs Getters

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.val

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 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/116.0.0.0 Safari/537.36

Browser/OS: Chrome 116 on Windows

View result in a separate tab

Test name	Executions per second
Object access	16131587.0 Ops/sec
Proxy access	13623587.0 Ops/sec
Proxy with get handler access	6580930.5 Ops/sec
Object with getter	14704893.0 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down the benchmark and its test cases.

**Benchmark Definition JSON**

The provided JSON defines a JavaScript microbenchmark named "Access to Proxy vs Object vs Getters". The script preparation code creates three objects:

1. `object`: a plain object with a single property `value` containing the string `'data'`.
2. `proxy`: a proxy object created using the `Proxy` constructor, where the target is `object`. The proxy has an empty handler, which means it delegates all property accesses to the target.
3. `proxyWithHandler`: another proxy object, similar to `proxy`, but with a custom getter handler defined inside the constructor.

The HTML preparation code is empty, indicating that this benchmark doesn't depend on any external factors like DOM manipulation or asynchronous operations.

**Test Cases**

The test cases are defined in an array of objects, each containing:

1. `Benchmark Definition`: a string representing the JavaScript expression to be executed.
2. `Test Name`: a human-readable name for the test case.

There are four test cases:

1. `"object.value;"` - accessing the `value` property on the plain `object`.
2. `"proxy.value"` - accessing the `value` property on the proxy object `proxy`.
3. `"proxyWithHandler.value"` - accessing the `value` property on the proxy object `proxyWithHandler`, which has a custom getter handler.
4. `"objWithGetter.val"` - accessing the `_val` property on an object with a getter method named `value`.

**Options Compared**

The benchmark compares four different approaches to access properties:

1. **Plain Object (`object.value;`)**: direct property access on a plain object.
2. **Proxy Object (`proxy.value;`)**: property access on a proxy object with no custom handler.
3. **Proxy Object with Custom Getter Handler (`proxyWithHandler.value;`)**: property access on a proxy object with a custom getter handler defined inside the constructor.

**Pros and Cons**

Here are some pros and cons of each approach:

1. **Plain Object (`object.value;`)**:
	* Pros: simple, straightforward, fast.
	* Cons: no caching or optimization of property accesses.
2. **Proxy Object (`proxy.value;`)**:
	* Pros: provides a way to add custom behavior or caching for property accesses, can be faster than direct object access in some cases.
	* Cons: requires creating and managing proxy objects, which can introduce overhead.
3. **Proxy Object with Custom Getter Handler (`proxyWithHandler.value;`)**:
	* Pros: allows for fine-grained control over property access behavior, can optimize caching or computation.
	* Cons: requires defining a custom getter handler, which can add complexity.

**Library Usage**

The `Reflect.get()` function is used in the getter handler of the proxy object with a custom getter handler. This function provides a way to dynamically retrieve the value of a property on an object, and it's used to delegate the getter behavior for the `_val` property on the `objWithGetter` object.

**Special JS Features**

The benchmark uses some modern JavaScript features:

1. **Proxy Objects**: introduced in ECMAScript 2015 (ES6), provides a way to create objects that can trap property accesses or modifications.
2. **Getters and Setters**: also introduced in ES6, allows for defining custom getter or setter behavior for properties on objects.

Overall, this benchmark aims to compare the performance of different approaches to accessing properties on JavaScript objects, highlighting the trade-offs between simplicity, customization, and optimization.

Related benchmarks:

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

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

Created: one year 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>

Experimental features:

Fastest: N/A

Slowest: N/A

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