Benchmark: Access to Proxy vs Object with getter

Script Preparation code:

object = { value: 'data', getData() {return this.value;} };
Object.defineProperty(object, 'dataProperty', {
  get() { return this.value; }
});
proxy = new Proxy(object, {})
proxyWithHandler = new Proxy(object, {
	get(target, prop, receiver) {
    	return Reflect.get(target, prop, receiver)
    }
})

Tests:

Object access
object.value;
Proxy access
proxy.value
Proxy with get handler access
proxyWithHandler.value
Use of simple getter
object.getData();
Use of defineProperty
object.dataProperty;

Historical Performance Data aggregated from 35 community runs

Desktop Results:

Chrome 26 runs

Object access

14.3M/s

Use of simple getter

13.9M/s

Use of defineProperty

13.9M/s

Proxy access

13.6M/s

Proxy with get handler access

6.7M/s

Fastest: Object access (2.1x faster)

View exact numbers

✓ Object access: 14,259,963 ops/sec
• Use of simple getter: 13,894,405 ops/sec
• Use of defineProperty: 13,881,182 ops/sec
• Proxy access: 13,565,242 ops/sec
• Proxy with get handler access: 6,674,288 ops/sec

Mobile Results:

Chrome 9 runs

Use of defineProperty

8.2M/s

Use of simple getter

8.2M/s

Object access

7.9M/s

Proxy access

6.6M/s

Proxy with get handler access

3.1M/s

Fastest: Use of defineProperty (2.6x faster)

View exact numbers

✓ Use of defineProperty: 8,233,651 ops/sec
• Use of simple getter: 8,203,234 ops/sec
• Object access: 7,856,448 ops/sec
• Proxy access: 6,613,880 ops/sec
• Proxy with get handler access: 3,114,966 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
Use of simple getter
Use of defineProperty

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Chrome 139 on Mac OS X 10.15.7

View result in a separate tab

Object access

178.7M/s

Use of simple getter

171.5M/s

Use of defineProperty

154.7M/s

Proxy access

64.6M/s

Proxy with get handler access

35.4M/s

View exact numbers

Test name	Executions per second
✓ Object access	178,686,816 Ops/sec
Use of simple getter	171,482,096 Ops/sec
Use of defineProperty	154,738,320 Ops/sec
Proxy access	64,565,580 Ops/sec
Proxy with get handler access	35,373,864 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down what's being tested in the provided JSON.

**Benchmark Definition**

The benchmark defines two objects: `object` and `proxy`. The script preparation code creates these objects, including setting up a getter for `dataProperty` on `object` using `defineProperty`, and creating a proxy for `object` using `Proxy`.

**Options Being Compared**

There are four options being compared:

1. **Object access**: Accessing the `value` property directly on `object`.
2. **Proxy access**: Accessing the `value` property through the proxy created for `object`.
3. **Proxy with get handler access**: Accessing the `value` property through a proxy that uses a getter function to retrieve its value.
4. **Use of simple getter**: Calling the `getData()` method on `object` to retrieve its value.

**Pros and Cons**

Here's a brief overview of each option:

1. **Object access**: This is the most direct way to access the `value` property, but it may not be as efficient as other options since it involves a simple lookup.
	* Pros: Fast, straightforward.
	* Cons: May not be as efficient due to the direct lookup.
2. **Proxy access**: Using a proxy allows for more control over how the `value` property is accessed and retrieved.
	* Pros: Can provide more flexibility and customization options.
	* Cons: May introduce additional overhead due to the proxy setup.
3. **Proxy with get handler access**: This option uses a getter function to retrieve the value of the `value` property through the proxy.
	* Pros: Provides a controlled way to retrieve the value, which can be useful in certain scenarios.
	* Cons: Introduces additional overhead due to the getter function setup and calls.
4. **Use of simple getter**: Calling the `getData()` method on `object` is an alternative way to retrieve its value.
	* Pros: Fast, straightforward.
	* Cons: May not be as efficient as other options since it involves a method call.

**Library Used**

None explicitly mentioned in this benchmark.

**Special JS Feature/Syntax**

This benchmark does not use any special JavaScript features or syntax that would require additional explanation.

**Other Considerations**

The benchmark is designed to compare the performance of different ways to access and retrieve data from an object. The results will likely indicate which approach is most efficient, depending on the specific use case and requirements.

As for alternatives, other options might include:

* Using a library like Lodash or Underscore.js to provide more utility functions for working with objects.
* Implementing a custom caching mechanism to store the value of `dataProperty` directly on the proxy.
* Comparing the performance of different data structures, such as arrays or objects, for storing and retrieving values.

However, without additional context or requirements, these alternatives are not relevant to this specific benchmark.

Access to Proxy vs Object with getter (version: 0)

Comparing performance of: `Object access vs Proxy access vs Proxy with get handler access vs Use of simple getter vs Use of defineProperty`

Created: 4 years ago by: Guest

Go to the latest result

Object access

Proxy access

Proxy with get handler access

Use of simple getter

Use of defineProperty

Historical Performance Data aggregated from 35 community runs

Desktop Results:

Chrome 26 runs

Mobile Results:

Chrome 9 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 with getter (version: 0)

Comparing performance of: Object access vs Proxy access vs Proxy with get handler access vs Use of simple getter vs Use of defineProperty

Created: 4 years ago by: Guest

Go to the latest result

Object access

Proxy access

Proxy with get handler access

Use of simple getter

Use of defineProperty

Historical Performance Data aggregated from 35 community runs

Desktop Results:

Chrome 26 runs

Mobile Results:

Chrome 9 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 vs Use of simple getter vs Use of defineProperty`