Benchmark: Proxy with Map vs Proxy vs Object vs Map

Script Preparation code:

var baseObject = {
	exampleProp: "exampleValue"
}

var baseMap = new Map();
baseMap.set("exampleProp", "exampleValue");

var baseProxy = new Proxy({}, {
	get(t, prop) {
    	return prop === "exampleProp"? "exampleValue" : null;
    }
})

var baseProxyWithMap = new Proxy({}, {
	get(t, prop) {
    	return baseMap.get(prop);
    }
});

var buffer = null;

Tests:

Proxy with Map
buffer = baseProxyWithMap.exampleProp
Proxy
buffer = baseProxy.exampleProp
Object
buffer = baseObject.exampleProp
Map
buffer = baseMap.get("exampleProp")

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Proxy with Map
Proxy
Object
Map

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Chrome 121 on Linux

View result in a separate tab

Object

7.6M/s

Map

7.3M/s

Proxy

6.8M/s

Proxy with Map

5.0M/s

View exact numbers

Test name	Executions per second
✓ Object	7,633,507 Ops/sec
Map	7,280,077 Ops/sec
Proxy	6,764,941 Ops/sec
Proxy with Map	5,003,974 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 benchmark and its test cases.

**What is being tested?**

The provided benchmark compares four different approaches to create a proxy object in JavaScript:

1. Using an object (`baseObject`).
2. Using a `Map` object (`baseMap`).
3. Using a proxy object with a `Map` as its target (`baseProxyWithMap`).
4. Using a plain proxy object (`baseProxy`).

The benchmark measures the execution speed of accessing a property on each of these proxies.

**Options compared**

The benchmark compares the performance of four different approaches:

1. **Object**: The simplest approach, using an ordinary object to create a proxy.
2. **Map**: Using a `Map` object to store and retrieve properties.
3. **Proxy with Map**: Creating a proxy object that uses a `Map` as its target.
4. **Plain Proxy**: A generic proxy object without any additional storage.

**Pros and cons of each approach**

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

1. **Object**:
	* Pros: Simple, easy to implement, fast access times (O(1)).
	* Cons: Does not support property deletion or updates.
2. **Map**:
	* Pros: Supports property deletion and updates, can store arbitrary data.
	* Cons: Requires explicit key management, slower access times (O(1) with lookup, O(n) with insertion/deletion).
3. **Proxy with Map**:
	* Pros: Combines the benefits of both approaches, supports dynamic property storage and retrieval.
	* Cons: More complex implementation, potentially slower due to additional overhead.
4. **Plain Proxy**:
	* Pros: Generic, flexible, can be used for various use cases.
	* Cons: Requires manual management of properties, slower access times (O(1) with lookup, O(n) with property addition/removal).

**Library usage**

The benchmark uses the built-in `Proxy` and `Map` objects in JavaScript.

**Special JS feature or syntax**

The benchmark utilizes the `Proxy` object's `get` trap to implement dynamic property retrieval on each proxy. The `get` trap is a built-in JavaScript feature that allows you to modify the behavior of an object at runtime.

**Other alternatives**

If you want to create a proxy object without using the built-in `Proxy` or `Map` objects, you can use libraries like [Proxy.js](https://github.com/rollupjs/Proxy) or implement your own proxy factory function. However, these alternatives are likely to be more complex and may not offer significant performance benefits.

In summary, the benchmark compares four different approaches to create a proxy object in JavaScript, highlighting the trade-offs between simplicity, flexibility, and performance.

Proxy with Map vs Proxy vs Object vs Map (version: 0) Benchmark.js

Comparing performance of: `Proxy with Map vs Proxy vs Object vs Map`

Created: 2 years ago by: Guest

Go to the latest result

Proxy with Map

Proxy

Object

Map

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

Proxy with Map vs Proxy vs Object vs Map (version: 0) Benchmark.js

Comparing performance of: Proxy with Map vs Proxy vs Object vs Map

Created: 2 years ago by: Guest

Go to the latest result

Proxy with Map

Proxy

Object

Map

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: `Proxy with Map vs Proxy vs Object vs Map`