Benchmark: Setter to Proxy vs Object

Script Preparation code:

object = {};
proxy = new Proxy(object, {})
proxyWithHandler = new Proxy(object, {
	set(target, prop, receiver) {
    	return Reflect.set(target, prop, receiver)
    }
})

Tests:

Object setter
object.value = 'data';
Proxy setter
proxy.value = 'data';
Proxy with set handler
proxyWithHandler.value = 'data';

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Object setter
Proxy setter
Proxy with set handler

Fastest: N/A

Slowest: N/A

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

LLMs can make mistakes. Check important info.

Let's break down the provided benchmarking test cases and explain what's being tested, along with the pros and cons of each approach.

**Benchmark Definition JSON**

The benchmark definition specifies that two types of objects are being created:

1. `object`: A plain JavaScript object (no proxy).
2. `proxy` and `proxyWithHandler`: Proxies created using the `Proxy` constructor.

In the script preparation code, we see how these objects are initialized with a specific handler:

* `proxy` uses a default handler that simply calls `Reflect.set()` on the target.
* `proxyWithHandler` uses a custom set handler (`set` function) to determine whether to use the Reflect's built-in implementation or the custom one.

**Test Cases**

There are three test cases, each with a simple benchmarking statement:

1. **"Object setter"`: This test sets a property on the plain `object`.
2. **"Proxy setter"`: This test sets a property on the `proxy` object.
3. **"Proxy with set handler"`: This test sets a property on the `proxyWithHandler` object.

**What's being tested**

The benchmark is testing how these different types of objects (plain object, proxy, and custom-handled proxy) perform when setting properties. The specific metrics being measured are:

* Execution frequency per second (`ExecutionsPerSecond`)
* Browser performance

**Pros and Cons of each approach**

1. **Plain Object (`object`)**:
	* Pros: Simple to create and use; well-supported by most browsers.
	* Cons: May not be optimized for performance.
2. **Proxy (`proxy`)**:
	* Pros: Provides additional features like caching, tracing, and more.
	* Cons: Can introduce overhead due to the proxy creation process.
3. **Custom-handled Proxy (`proxyWithHandler`)**:
	* Pros: Allows for fine-grained control over property setting behavior.
	* Cons: May require more code and have higher overhead compared to plain objects.

**Library and Features**

The `Proxy` constructor is a built-in JavaScript feature introduced in ECMAScript 2015 (ES6). The proxy creates an object that acts as a thin wrapper around another object, allowing for modifications to its behavior at runtime. In this benchmark, the proxy's default handler is used, but it could be overridden or customized using additional handlers.

**Special JS Features/Syntax**

There are no specific special JavaScript features or syntax being tested in these benchmarks. The focus is on the performance differences between plain objects, proxies, and custom-handled proxies.

**Other Alternatives**

If you need to benchmark other types of objects or scenarios, consider:

1. **Native Web Workers**: If you want to test worker-side execution.
2. **IndexedDB/Storage APIs**: For storage-related benchmarks.
3. **WebAssembly/JS engine-specific optimizations**: To explore performance differences between different WASM or JavaScript engines.

Keep in mind that the specific alternatives will depend on your use case and requirements.

Latest run results:

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

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/102.0.0.0 Safari/537.36

Browser/OS: Chrome 102 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
Object setter	14351789.0 Ops/sec
Proxy setter	5042764.0 Ops/sec
Proxy with set handler	4962402.5 Ops/sec

Related benchmarks:

Setter to Proxy vs Object (version: 0)

Comparing performance of: Object setter vs Proxy setter vs Proxy with set handler

Created: 4 years ago by: Guest

Jump to the latest result

Object setter

Proxy setter

Proxy with set handler

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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