Benchmark: Access to Proxy vs Object vs computed

Script Preparation code:

object = {
    value: 'data'
};
proxy = new Proxy(object, {})
proxyWithHandler = new Proxy(object, {
    get(target, prop, receiver) {
        return Reflect.get(target, prop, receiver)
    }
})

class Obj {
    _value = 'data';

    get value() {
        return this._value;
    }
}
computed = new Obj();

Tests:

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

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
Access through computed get

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:109.0) Gecko/20100101 Firefox/113.0

Browser/OS: Firefox 113 on Ubuntu

View result in a separate tab

Test name	Executions per second
Object access	977386368.0 Ops/sec
Proxy access	8119330.5 Ops/sec
Proxy with get handler access	2832923.2 Ops/sec
Access through computed get	974745408.0 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down the benchmark and explain what's being tested.

**Benchmark Overview**

The benchmark compares the performance of three different ways to access a value within an object:

1. **Direct Object Access**: accessing `object.value`
2. **Proxy Access**: using a proxy (`proxy` object) created with `new Proxy(object, {})`
3. **Computed Access through a getter method**: accessing `computed.value`, where `computed` is an instance of the `Obj` class that overrides the `value` property with a getter method.

**Options Comparison**

The three options are compared to determine which one is the fastest.

* **Pros and Cons:**
	+ Direct Object Access:
		- Pros: simple, straightforward access.
		- Cons: may involve additional overhead due to JavaScript's internal workings (e.g., property lookup, caching).
	+ Proxy Access:
		- Pros: can be used for more complex scenarios where direct object access is not suitable (e.g., intercepting or modifying requests).
		- Cons: introduces additional overhead due to the proxy creation and management.
	+ Computed Access through a getter method:
		- Pros: allows for fine-grained control over property access, enabling caching or other optimizations.
		- Cons: requires creating an instance of the `Obj` class and defining a getter method, which can add overhead.
* **Other Considerations:** The benchmark also considers the impact of using a proxy with a custom `get` handler (`proxyWithHandler`). This option is similar to Proxy Access but with additional overhead due to the custom handler.

**Library and Special JS Features**

The benchmark uses the following JavaScript libraries or features:

* `Proxy`: a built-in JavaScript object that allows creating proxies, which are objects that wrap another object.
* `Obj` class: a custom class defined in the script preparation code. This class overrides the `value` property with a getter method, allowing for computed access to the value.

**Test Cases**

Each test case measures the execution time of accessing the `value` property through one of the three options:

1. **Object Access**: accesses `object.value`
2. **Proxy Access**: uses the proxy (`proxy`) object
3. **Proxy with Get Handler Access**: uses a custom `get` handler in the proxy (`proxyWithHandler`)
4. **Access through Computed Get**: uses an instance of the `Obj` class to access the value through its getter method.

**Alternatives**

Other alternatives for accessing properties within objects might include:

* Using a library like Lodash or Underscore.js, which provides utility functions for working with objects.
* Implementing a custom solution using JavaScript's built-in `Object.defineProperty()` function to define getters and setters for specific properties.
* Using a different approach, such as caching the accessed value or using a more efficient data structure.

Related benchmarks:

Access to Proxy vs Object vs computed (version: 0)

Comparing performance of: Object access vs Proxy access vs Proxy with get handler access vs Access through computed get

Created: one year ago by: Guest

Jump to the latest result

Object access

Proxy access

Proxy with get handler access

Access through computed get

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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