Benchmark: Access to Proxy vs new Proxy vs Object

Script Preparation code:

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

Tests:

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

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: one year ago)

User agent: Mozilla/5.0 (iPad; CPU OS 16_6 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) CriOS/116.0.5845.103 Mobile/15E148 Safari/604.1

Browser/OS: Chrome Mobile iOS 116 on iOS 16.6

View result in a separate tab

Test name	Executions per second
Object access	15666077.0 Ops/sec
Proxy access	14982360.0 Ops/sec
Proxy with get handler access	6009883.5 Ops/sec
New Proxy with handler	3119687.0 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's dive into the world of JavaScript microbenchmarks.

**Benchmark Overview**

The provided JSON represents a benchmark that tests the performance of accessing different types of proxies in JavaScript: traditional objects, new Proxy instances, and proxy instances with a custom get handler.

**Options Compared**

The benchmark compares four options:

1. **Traditional Object Access**: Directly accessing the `value` property of the `object` variable.
2. **Proxy Access**: Accessing the `value` property of the `proxy` instance.
3. **Proxy with Get Handler Access**: Accessing the `value` property of the `proxyWithHandler` instance, which has a custom get handler function.
4. **New Proxy with Handler Access**: Creating a new Proxy instance using the `new Proxy()` constructor and accessing its `value` property.

**Pros and Cons**

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

1. **Traditional Object Access**:
	* Pros: Simple, fast, and widely supported.
	* Cons: May not be suitable for complex data structures or scenarios where property access is optimized.
2. **Proxy Access**:
	* Pros: Can provide additional security features (e.g., tracing, interception) and optimization for certain use cases.
	* Cons: Can introduce performance overhead due to the creation of a proxy instance and potential method invocation.
3. **Proxy with Get Handler Access**:
	* Pros: Provides a high degree of control over property access and can optimize performance by avoiding unnecessary method invocations.
	* Cons: Requires creating a custom get handler function, which can add complexity and potentially introduce overhead.
4. **New Proxy with Handler Access**:
	* Pros: Combines the benefits of traditional object access with the flexibility of proxy instances.
	* Cons: May incur additional performance overhead due to the creation of a new Proxy instance.

**Library Used**

None, as this benchmark doesn't rely on any external libraries.

**Special JS Feature/Syntax**

This benchmark uses a feature introduced in ECMAScript 2011 (ES5.1): `Reflect.get()`. This method is used to implement the custom get handler function in the **Proxy with Get Handler Access** scenario.

**Other Considerations**

When writing benchmarks like this, it's essential to consider factors such as:

* Language and platform specifics
* Optimizations and compiler optimizations
* Browser and runtime-specific features

Keep in mind that benchmarking is an art and a science. The results may vary depending on the specific use case and environment.

As for alternatives, if you're interested in exploring other approaches or libraries, here are a few options:

* **Proxy Proxy**: A polyfill library for older browsers to support modern Proxy syntax.
* **Proxy-polyfill**: Another polyfill library for supporting Proxy instances in older browsers.
* **Benchmarking frameworks like benchmark.js** or **benchpress**, which provide more structured and efficient ways to write benchmarks.

Feel free to ask if you'd like me to elaborate on any of these points!

Related benchmarks:

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

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

Created: one year ago by: Guest

Jump to the latest result

Object access

Proxy access

Proxy with get handler access

New Proxy with handler

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