Benchmark: Access to Proxy vs Object with getter v2

Script Preparation code:

object = { value: 'data', getData() {return this.value;} };
Object.defineProperty(object, 'dataProperty', {
  get() { return this.value; }
});
proxy = new Proxy(object, {})
proxyWithHandler = new Proxy(object, {
	get(target, prop, receiver) {
    	return target[prop]
    }
})

Tests:

Object access
object.value;
Proxy access
proxy.value
Proxy with get handler access
proxyWithHandler.value
Use of simple getter
object.getData();
Use of defineProperty
object.dataProperty;

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
Use of simple getter
Use of defineProperty

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/110.0.0.0 Safari/537.36

Browser/OS: Chrome 110 on Windows

View result in a separate tab

Test name	Executions per second
Object access	12856777.0 Ops/sec
Proxy access	10268416.0 Ops/sec
Proxy with get handler access	9732634.0 Ops/sec
Use of simple getter	12566425.0 Ops/sec
Use of defineProperty	12752992.0 Ops/sec

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

LLMs can make mistakes. Check important info.

I'll break down the benchmark and explain what's being tested.

**Benchmark Overview**

The benchmark compares the performance of accessing an object property using three different approaches:

1. **Direct Object Access**: Using dot notation (`object.value`).
2. **Proxy Access**: Using a Proxy object (`proxy.value`).
3. **Proxy with Get Handler Access**: Using a Proxy object with a custom get handler (`proxyWithHandler.value`).

**Options Compared**

The benchmark compares the performance of each approach, which can be summarized as follows:

* **Direct Object Access** vs **Proxy Access**: Direct access is faster because it bypasses the proxy's overhead.
* **Direct Object Access** vs **Proxy with Get Handler Access**: With a custom get handler, the proxy's behavior changes, and the performance difference between direct access and proxy-based access becomes more noticeable.
* **Proxy Access** vs **Proxy with Get Handler Access**: The presence of a custom get handler improves the performance of proxy-based access.

**Pros and Cons**

Here are the pros and cons of each approach:

1. **Direct Object Access**:
	* Pros: Fast, no overhead.
	* Cons: Only works directly on the object, not on Proxy objects.
2. **Proxy Access**:
	* Pros: Works with Proxy objects, can intercept property access.
	* Cons: Bypasses direct object access, incurs proxy overhead.
3. **Proxy with Get Handler Access**:
	* Pros: Improves performance of proxy-based access by providing a custom get handler.
	* Cons: Requires setting up a custom get handler, adds complexity.

**Libraries and Special JS Features**

In this benchmark, there is no specific library used, but the `Proxy` object is a built-in JavaScript feature introduced in ECMAScript 2015 (ES6).

**Other Considerations**

When working with Proxies, it's essential to consider the following:

* The custom get handler should be optimized for performance and only perform necessary operations.
* The Proxy object should be used judiciously, as excessive use can incur significant overhead.

**Alternatives**

If you need alternative approaches or have different requirements, consider the following options:

1. **Use a library**: Depending on your specific use case, you might want to explore libraries like `json-store` or `objection.js`, which provide features similar to Proxies but with additional functionality.
2. **Manual implementation**: For simple cases, implementing custom access logic without using Proxies can be a viable alternative.

In summary, the benchmark tests the performance of accessing an object property using three approaches: direct object access, proxy access, and proxy with get handler access. The pros and cons of each approach are discussed, as well as considerations for working with Proxies in JavaScript.

Related benchmarks:

Access to Proxy vs Object with getter v2 (version: 0)

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

Created: one year ago by: Guest

Jump to the latest result

Object access

Proxy access

Proxy with get handler access

Use of simple getter

Use of defineProperty

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):