Benchmark: Access to Proxy vs Object - without reflect

Script Preparation code:

object = { value: 'data' };
proxy = new Proxy(object, {})
proxyWithHandler = new Proxy(object, {
	get(target, prop, receiver) {
    	return 'data'
    }
})

Tests:

Object access
object.value;
Proxy access
proxy.value
Proxy with get handler access
proxyWithHandler.value

Historical Performance Data aggregated from 5 community runs

Desktop Results:

Chrome 5 runs

Object access

113.2M/s

Proxy access

48.7M/s

Proxy with get handler access

35.3M/s

Fastest: Object access (3.2x faster)

View exact numbers

✓ Object access: 113,220,512 ops/sec
• Proxy access: 48,734,292 ops/sec
• Proxy with get handler access: 35,319,184 ops/sec

Results show median performance across all community submissions. Run this benchmark yourself to verify on your device.

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Object access
Proxy access
Proxy with get handler access

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/138.0.0.0 Safari/537.36

Browser/OS: Chrome 138 on Windows

View result in a separate tab

Object access

136.3M/s

Proxy access

51.3M/s

Proxy with get handler access

40.3M/s

View exact numbers

Test name	Executions per second
✓ Object access	136,271,808 Ops/sec
Proxy access	51,297,168 Ops/sec
Proxy with get handler access	40,301,556 Ops/sec

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

LLMs can make mistakes. Check important info.

I'd be happy to help you understand the benchmark being tested on MeasureThat.net.

**What is tested?**

The benchmark measures the performance difference between accessing an object's property directly (`object.value`) versus using a proxy object with a getter handler (`proxyWithHandler.value`). In this case, both `proxy` and `proxyWithHandler` point to the same underlying object (`object`).

**Options compared:**

There are three options being compared:

1. **Direct Object Access**: `object.value`
2. **Proxy Access**: `proxy.value`
3. **Proxy with Getter Handler Access**: `proxyWithHandler.value`

**Pros and Cons of each approach:**

* **Direct Object Access**:
	+ Pros: Fast, straightforward, and easy to implement.
	+ Cons: May involve additional overhead for things like bounds checking, type checking, or garbage collection.
* **Proxy Access**:
	+ Pros: Can provide more fine-grained control over property access (e.g., caching, transformation), can help with performance optimization, and is often used in libraries like Object-proxy for debugging purposes.
	+ Cons: May introduce additional overhead due to the creation of a new proxy object, which needs to be managed by the JavaScript engine. Additionally, getting the value from a proxy may involve more complex operations compared to direct access.
* **Proxy with Getter Handler Access**:
	+ Pros: Allows you to intercept and modify property access in a way that's not possible with plain proxies. This can be useful for caching or transformation purposes.
	+ Cons: May introduce additional overhead due to the creation of a new proxy object, which needs to be managed by the JavaScript engine.

**Other considerations:**

* The use of a `Proxy` object with an empty handler (`{}`) implies that no custom behavior is being applied. However, if you were to create a more complex getter handler, it could potentially introduce additional overhead.
* The fact that all browsers are running on Linux desktop platforms and using the Chrome browser might limit the generality of these results.

**Library/Functionality used:**

In this benchmark, no external libraries or functions are explicitly mentioned. However, the use of `Proxy` objects is a built-in JavaScript feature since ES6 (ECMAScript 2015).

There is no mention of any special JavaScript features or syntax being used in this benchmark.

**Alternatives:**

If you're interested in exploring similar benchmarks, MeasureThat.net has many other tests that compare different JavaScript scenarios, such as:

* Accessing an array element vs. accessing a Map key
* Using `new Date()` vs. using a timestamp to represent time elapsed
* Comparing the performance of object literals and arrays

Keep in mind that benchmark results can vary depending on specific use cases, platforms, and browser versions. It's always interesting to see how different approaches compare under various conditions.

Access to Proxy vs Object - without reflect (version: 0)

Comparing performance of: `Object access vs Proxy access vs Proxy with get handler access`

Created: 3 years ago by: Guest

Go to the latest result

Object access

Proxy access

Proxy with get handler access

Historical Performance Data aggregated from 5 community runs

Desktop Results:

Chrome 5 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

Access to Proxy vs Object - without reflect (version: 0)

Comparing performance of: Object access vs Proxy access vs Proxy with get handler access

Created: 3 years ago by: Guest

Go to the latest result

Object access

Proxy access

Proxy with get handler access

Historical Performance Data aggregated from 5 community runs

Desktop Results:

Chrome 5 runs

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: `Object access vs Proxy access vs Proxy with get handler access`