Benchmark: Access to Proxy vs Object

Script Preparation code:

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

Tests:

Object access
object.value;
Proxy access
proxy.value
Proxy with get handler access
proxyWithHandler.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

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 10 hours ago)

User agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/131.0.0.0 Safari/537.36

Browser/OS: Chrome 131 on Linux

View result in a separate tab

Test name	Executions per second
Object access	132969240.0 Ops/sec
Proxy access	50951268.0 Ops/sec
Proxy with get handler access	26887548.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 provided benchmark definition and test cases.

**Benchmark Definition**

The benchmark is defined in JSON format, which includes:

* `Name`: The name of the benchmark, "Access to Proxy vs Object".
* `Description`: An empty string, indicating that no description is provided for this benchmark.
* `Script Preparation Code`: A JavaScript code snippet that creates an object with a value, and then creates two proxies: one using the built-in `Proxy` constructor without any handlers (`proxy`), and another using the same object but with a custom get handler (`proxyWithHandler`). The script also declares variables for these proxies.
* `Html Preparation Code`: An empty string, indicating that no HTML code is needed to prepare for this benchmark.

The purpose of this benchmark is to compare the performance of accessing an object's property directly (using dot notation) versus using a proxy. A proxy is an object that provides access to its target object, but with additional functionality that can be specified during creation.

**Options Compared**

In this benchmark, two options are compared:

1. **Direct Object Access**: The original way to access the `value` property of the object using dot notation (`object.value`).
2. **Proxy-Based Access**: Using a proxy to access the `value` property. There are two variations:
	* `proxy.value`: Using the built-in `Proxy` constructor without any handlers.
	* `proxyWithHandler.value`: Using the same object but with a custom get handler.

**Pros and Cons**

Here's a brief overview of the pros and cons of each approach:

1. **Direct Object Access**:
	* Pros: Simple, fast, and efficient for simple cases.
	* Cons: Can be slower or more memory-intensive if the object is large or complex, as it involves creating a new scope and resolving the property path at runtime.
2. **Proxy-Based Access (with built-in Proxy)**:
	* Pros: Provides additional functionality without modifying the original object, can be faster or more efficient for certain cases.
	* Cons: May introduce additional overhead due to the creation of a proxy object and its associated handlers.
3. **Proxy-Based Access (with custom get handler)**:
	* Pros: Allows for fine-grained control over how properties are accessed, can optimize performance for specific use cases.
	* Cons: Requires more code and configuration, which may introduce additional complexity or overhead.

**Library**

In this benchmark, the `Reflect` library is implicitly used through the `Reflect.get()` function in the custom get handler. The `Reflect` library provides a set of functions that can be used to perform operations on objects without modifying their behavior.

**Special JavaScript Feature/Syntax**

The use of the built-in `Proxy` constructor and the custom get handler (`proxyWithHandler`) is an example of using a proxy in JavaScript. Proxies are a feature introduced in ECMAScript 2015 (ES6) that allow for dynamic and customizable objects.

**Other Alternatives**

For this specific benchmark, other alternatives to compare would be:

* Using `Object.getPrototypeOf()` or `Object.create()` to create a proxy-like object.
* Implementing a custom property accessor function using `Object.defineProperty()`.
* Comparing the performance of using a library like Lodash's `get()` function to access properties.

However, these alternatives might not provide the same level of customization and flexibility as using a built-in `Proxy` constructor or a custom get handler.

Related benchmarks:

Access to Proxy vs Object (version: 4)

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

Created: 5 years ago by: Registered User

Jump to the latest result

Object access

Proxy access

Proxy with get handler access

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