Benchmark: Proxy vs Proxy reflect vs prototype vs direct

Script Preparation code:

var obj = {}
var cnt = 1000

for (let i = 0; i < cnt; i++) {
  obj[i] = i + ''
}

var proxyReflect = new Proxy(obj, {
  get(obj, prop, reciever) {
    return Reflect.get(obj, prop, reciever)
  }
})

var proxy = new Proxy(obj, {
  get(obj, prop, reciever) {
    return obj[prop]
  }
})

var protoObj = Object.create(obj, {})

Tests:

Proxy
for (let i = 0; i < cnt; i++) { proxy[i] }
Prototype
for (let i = 0; i < cnt; i++) { protoObj[i] }
Direct
for (let i = 0; i < cnt; i++) { obj[i] }
Proxy reflect
for (let i = 0; i < cnt; i++) { proxyReflect[i] }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Proxy
Prototype
Direct
Proxy reflect

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 6 months ago)

User agent: Mozilla/5.0 (Linux; Android 10; K) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/144.0.0.0 Mobile Safari/537.36 EdgA/144.0.0.0

Browser/OS: Chrome Mobile 144 on Android

View result in a separate tab

Direct

401K/s

Prototype

19K/s

Proxy

6K/s

Proxy reflect

5K/s

View exact numbers

Test name	Executions per second
✓ Direct	401,192 Ops/sec
Prototype	19,316 Ops/sec
Proxy	6,217 Ops/sec
Proxy reflect	4,917 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 JSON and explain what's being tested.

**Benchmark Definition**

The benchmark is comparing four different approaches to access and manipulate an object:

1. **Direct**: Accessing properties directly on the `obj` object using dot notation (`obj[i]`).
2. **Prototype**: Using the `Object.create()` method to create a new object that inherits from the original `obj` object, and then accessing its properties using dot notation (`protoObj[i]`).
3. **Proxy**: Creating a Proxy object that wraps around the original `obj` object, and then accessing its properties using dot notation (`proxy[i]`).
4. **Proxy Reflect**: Similar to the Proxy approach, but uses the `Reflect.get()` method to access properties on the wrapped object.

**Options Compared**

The benchmark is comparing the performance of these four approaches:

* Direct: Accessing properties directly on the original object.
* Prototype: Using `Object.create()` to create a new object that inherits from the original object.
* Proxy: Creating a Proxy object that wraps around the original object.
* Proxy Reflect: Using `Reflect.get()` to access properties on the wrapped object.

**Pros and Cons**

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

* **Direct**: Fastest, as it doesn't incur any additional overhead. However, may not be as efficient if the object has many properties or is very large.
* **Prototype**: May be slower than Direct due to the overhead of creating a new object and setting its prototype chain. However, can be beneficial if the original object needs to be modified in place.
* **Proxy**: Provides more control over the access behavior of an object, as you can define custom traps for property access. Can be slower than Direct or Prototype due to the overhead of creating and managing a Proxy object.
* **Proxy Reflect**: Similar to Proxy, but uses `Reflect.get()` to access properties on the wrapped object. This approach can provide more control over access behavior than traditional Proxies.

**Library**

None of the approaches use any external libraries.

**Special JS Feature or Syntax**

There is no special JavaScript feature or syntax being tested in this benchmark.

**Other Considerations**

* **Object size**: The benchmark assumes that the original object `obj` has a large number of properties (`cnt=1000`). This may affect the performance of each approach.
* **Device platform and browser**: The benchmark results are reported for a specific device platform (Desktop) and browser (Chrome 128). Results may vary on other platforms or browsers.

**Alternative Approaches**

Some alternative approaches to testing object access behavior could include:

* Using `for...in` loops instead of direct property access.
* Using `JSON.parse()` instead of string concatenation (`i + ''`).
* Adding complex logic to the `get()` trap in a Proxy object.
* Comparing performance using different data structures, such as arrays or objects.

However, these alternative approaches would likely change the focus and scope of the benchmark, which may not be desirable if the goal is to compare the performance of direct property access versus other approaches.

Proxy vs Proxy reflect vs prototype vs direct (version: 0)

Comparing performance of: `Proxy vs Prototype vs Direct vs Proxy reflect`

Created: 3 years ago by: Guest

Go to the latest result

Proxy

Prototype

Direct

Proxy reflect

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

Proxy vs Proxy reflect vs prototype vs direct (version: 0)

Comparing performance of: Proxy vs Prototype vs Direct vs Proxy reflect

Created: 3 years ago by: Guest

Go to the latest result

Proxy

Prototype

Direct

Proxy reflect

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 vs Prototype vs Direct vs Proxy reflect`