Benchmark: Proxy vs prototype vs direct

Script Preparation code:

var obj = {}
var cnt = 1000

for (let i = 0; i < cnt; i++) {
  obj[i] = i + ''
}

var proxy = new Proxy(obj, {
  get(obj, prop, reciever) {
    return Reflect.get(obj, prop, reciever)
  }
})

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] }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Proxy
Prototype
Direct

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/129.0.0.0 Safari/537.36

Browser/OS: Chrome 129 on Windows

View result in a separate tab

Direct

8K/s

Prototype

6K/s

Proxy

2K/s

View exact numbers

Test name	Executions per second
✓ Direct	8,485 Ops/sec
Prototype	5,873 Ops/sec
Proxy	2,183 Ops/sec

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

LLMs can make mistakes. Check important info.

**Overview of the Benchmark**

The provided JSON represents a JavaScript microbenchmark that tests the performance of accessing properties on objects with different methods: direct property access, prototype-based access, and proxy-based access.

**Test Cases**

There are three test cases:

1. **Direct**: This test case accesses properties directly on the `obj` object using the syntax `obj[i]`.
2. **Prototype**: This test case accesses properties on an object created using `Object.create()` with a prototype set to the original `obj` object, using the syntax `protoObj[i]`.
3. **Proxy**: This test case accesses properties through a proxy object created using `new Proxy()`, with a trap function that simply delegates to the original object's property access, using the syntax `proxy[i]`.

**Comparison of Options**

The three options are compared in terms of their performance:

* **Direct Property Access**: This is the most straightforward way to access properties on an object. It involves looking up the property name directly in the object's prototype chain.
* **Prototype-Based Access**: Using `Object.create()` with a prototype set to the original object allows for faster lookups, as the property is only searched once in the prototype chain.
* **Proxy-Based Access**: The proxy object acts as an intermediary between the caller and the original object. While this can introduce additional overhead due to the creation of the proxy object and the trap function, it also provides a way to control access to properties at runtime.

**Pros and Cons**

Here are some pros and cons of each approach:

* **Direct Property Access**:
	+ Pros: Simple and efficient.
	+ Cons: May not provide fine-grained control over property access.
* **Prototype-Based Access**:
	+ Pros: Faster lookups, as the property is only searched once in the prototype chain.
	+ Cons: Requires careful management of the prototype chain to avoid infinite loops or unexpected behavior.
* **Proxy-Based Access**:
	+ Pros: Provides fine-grained control over property access at runtime, allows for caching and memoization, and can provide better performance in certain scenarios.
	+ Cons: Introduces additional overhead due to the creation of the proxy object and trap function.

**Library Usage**

The benchmark uses `Object.create()` to create a new object with a prototype set to the original `obj` object. This is not a specific library, but rather a built-in JavaScript feature.

**Special JS Features or Syntax**

This benchmark does not use any special JavaScript features or syntax beyond the standard language features. However, it does rely on some low-level details of how JavaScript handles property access, such as the behavior of `Object.create()` and the implementation of the proxy trap function.

**Other Alternatives**

There are several other alternatives to these approaches that could be used in a benchmark:

* **Array-based access**: Using an array instead of an object to store the properties being accessed.
* **Map-based access**: Using a Map data structure instead of an object to store the properties being accessed.
* **Caching**: Implementing caching mechanisms, such as `Memoize` or `LruCache`, to reduce the overhead of repeated property accesses.

These alternatives could be used to create a more comprehensive benchmark that tests different aspects of JavaScript performance.

Proxy vs prototype vs direct (version: 0)

Comparing performance of: `Proxy vs Prototype vs Direct`

Created: 3 years ago by: Guest

Go to the latest result

Proxy

Prototype

Direct

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 prototype vs direct (version: 0)

Comparing performance of: Proxy vs Prototype vs Direct

Created: 3 years ago by: Guest

Go to the latest result

Proxy

Prototype

Direct

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`