Benchmark: Access to Proxy vs Object vs plain proxy

Script Preparation code:

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

Tests:

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

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 2 years ago)

User agent: Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:130.0) Gecko/20100101 Firefox/130.0

Browser/OS: Firefox 130 on Ubuntu

View result in a separate tab

Object access

1880.4M/s

Proxy access

423.1M/s

only-proxy

104.7M/s

Proxy with get handler access

71.7M/s

View exact numbers

Test name	Executions per second
✓ Object access	1,880,421,760 Ops/sec
Proxy access	423,114,976 Ops/sec
only-proxy	104,691,568 Ops/sec
Proxy with get handler access	71,692,960 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 and its test cases.

**Benchmark Overview**

The benchmark compares the performance of three approaches to access data stored in an object:

1. **Plain Object**: Directly accessing the `value` property of the object using dot notation (`object.value`).
2. **Proxy**: Using a proxy object, which is a special type of object that allows you to intercept and modify access to its properties.
3. **Proxy with Get Handler**: Creating a proxy object with a get handler, which specifies how to handle requests for property values.

**Library Used**

The `Reflect.get` method is used in the benchmark. This method returns the value of a specified property on an object, allowing you to dynamically access nested properties without using dot notation.

**JavaScript Features and Syntax**

The benchmark uses JavaScript features and syntax such as:

* **Proxy objects**: Introduced in ECMAScript 2015 (ES6), proxy objects allow you to intercept and modify access to properties.
* **Get handlers**: Also introduced in ES6, get handlers provide a way to customize how property values are accessed.

**Options Compared**

The benchmark compares the performance of three options:

1. **Plain Object Access**: Directly accessing the `value` property using dot notation (`object.value`).
2. **Proxy Access**: Using a proxy object to access the `value` property (`proxy.value`).
3. **Proxy with Get Handler Access**: Creating a proxy object with a get handler to access the `value` property (`proxyWithHandler.value`).

**Pros and Cons**

* **Plain Object Access**:
	+ Pros: Simple, widely supported, and efficient for small objects.
	+ Cons: May lead to slower performance for large objects due to the need to traverse nested properties.
* **Proxy Access**:
	+ Pros: Allows for more flexibility in accessing nested properties, can be used for security or optimization purposes.
	+ Cons: May introduce additional overhead due to the creation and maintenance of proxy objects.
* **Proxy with Get Handler Access**:
	+ Pros: Provides fine-grained control over property access, allowing for optimizations or custom behavior.
	+ Cons: May add complexity to code and require more resources (memory and CPU) compared to plain object access.

**Other Alternatives**

If you need to optimize performance or implement custom access control mechanisms, other alternatives might include:

* Using `Object.getOwnPropertyDescriptor` to retrieve property descriptors and then accessing the value through a custom function.
* Implementing a custom getter function using the `get` keyword on an object.
* Utilizing third-party libraries or frameworks that provide optimized data access mechanisms.

Keep in mind that these alternatives may require additional setup, maintenance, or resources compared to using proxy objects with get handlers.

Access to Proxy vs Object vs plain proxy (version: 0) Benchmark.js

Comparing performance of: `Object access vs Proxy access vs Proxy with get handler access vs only-proxy`

Created: 3 years ago by: Guest

Go to the latest result

Object access

Proxy access

Proxy with get handler access

only-proxy

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

Access to Proxy vs Object vs plain proxy (version: 0) Benchmark.js

Comparing performance of: Object access vs Proxy access vs Proxy with get handler access vs only-proxy

Created: 3 years ago by: Guest

Go to the latest result

Object access

Proxy access

Proxy with get handler access

only-proxy

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: `Object access vs Proxy access vs Proxy with get handler access vs only-proxy`