Benchmark: Setting on Proxy vs Object (with and without handler/Reflect)

Script Preparation code:

object = {
    value: Math.random()
};
proxy = new Proxy(object, {})
proxyWithHandler = new Proxy(object, {
    set(target, prop, value) {
        target[prop] = value;
    }
})
proxyWithReflectHandler = new Proxy(object, {
    set(target, prop, value) {
        return Reflect.set(target, prop, value)
    }
})

Tests:

set on object
object.value = Math.random()
set on Proxy
proxy.value = Math.random()
set on Proxy (directly on target object)
proxyWithHandler.value = Math.random()
set on Proxy (using Reflect)
proxyWithReflectHandler.value = Math.random()

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
set on object
set on Proxy
set on Proxy (directly on target object)
set on Proxy (using Reflect)

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Chrome 107 on Linux

View result in a separate tab

Test name	Executions per second
set on object	4222293.5 Ops/sec
set on Proxy	1703734.0 Ops/sec
set on Proxy (directly on target object)	1318822.6 Ops/sec
set on Proxy (using Reflect)	2026966.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 explain what's being tested.

**Benchmark Overview**

The test compares the performance of different approaches to set a value on an object in JavaScript, specifically using a proxy object with and without handlers/Reflect.

**Options Compared**

There are four options being compared:

1. **Set on Object**: Directly setting the value on the original object.
2. **Set on Proxy (using Reflect)**: Using the `Reflect.set()` method to set the value on the proxy object.
3. **Set on Proxy (directly on target object)**: Setting the value directly on the target object of the proxy, bypassing the proxy's getter and setter methods.

**Pros and Cons**

1. **Set on Object**:
	* Pros: Simple and straightforward approach.
	* Cons: May incur additional overhead due to JavaScript's caching and optimization mechanisms.
2. **Set on Proxy (using Reflect)**:
	* Pros: Provides a more explicit and predictable way of setting values on the proxy object, which can be beneficial for certain use cases.
	* Cons: May incur additional overhead due to the `Reflect.set()` method invocation.
3. **Set on Proxy (directly on target object)**:
	* Pros: Bypasses the proxy's getter and setter methods, potentially reducing overhead.
	* Cons: May not provide the same level of control or predictability as using Reflect.

**Library and Purpose**

The `Proxy` object is a built-in JavaScript object that allows you to create a transparent wrapper around an existing object. It provides a way to intercept and modify access to the original object's properties, which can be useful for implementing aspects like caching, logging, or validation.

In this benchmark, the proxy object is used to test different approaches to setting values on its target object. The `ProxyWithHandler` and `ProxyWithReflectHandler` objects are created with custom setters that demonstrate these different approaches.

**Special JS Feature**

The benchmark uses JavaScript's built-in `Reflect.set()` method, which provides a way to set the value of a property on an object in a non-destructive manner. This method is not specific to any particular browser or version, but it is supported by most modern JavaScript engines.

**Other Alternatives**

If you're interested in alternative approaches, here are a few examples:

* Using `Object.defineProperty()` with `writable: false` to set the value on the proxy object.
* Implementing custom getters and setters using a closure-based approach.
* Using third-party libraries like `Proxy-Manager` or `AspectJS` that provide more advanced proxy management features.

Keep in mind that these alternatives may have different trade-offs in terms of performance, complexity, and compatibility.

Related benchmarks:

Setting on Proxy vs Object (with and without handler/Reflect) (version: 0)

Comparing performance of: set on object vs set on Proxy vs set on Proxy (directly on target object) vs set on Proxy (using Reflect)

Created: one year ago by: Guest

Jump to the latest result

set on object

set on Proxy

set on Proxy (directly on target object)

set on Proxy (using Reflect)

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