Benchmark: Plain object access vs Proxy vs Property

Script Preparation code:

object = { value: 'data' };
proxy = new Proxy(object, {})
proxyGet = new Proxy(object, {
	get(target, prop, receiver) {
    	return target[prop]
    }
})
props = {}
Object.defineProperty(props, "value", {get() {return "data"}, set() {}})

Tests:

Object access
object.value;
Proxy access
proxy.value
Proxy with get handler access
proxyGet.value
Property
props.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
Property

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Chrome 125 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
Object access	13625939.0 Ops/sec
Proxy access	13287284.0 Ops/sec
Proxy with get handler access	11373825.0 Ops/sec
Property	12789968.0 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's dive into the world of JavaScript microbenchmarks!

**Benchmark Overview**

The provided benchmark compares the performance of three different approaches to accessing an object property:

1. **Plain Object Access**: Directly accessing the `value` property of the `object`.
2. **Proxy Access**: Using a Proxy object to access the `value` property.
3. **Property Access**: Defining a new property on another object and using it to access the `value`.

**Options Compared**

* Plain Object Access vs Proxy Access
* Plain Object Access vs Property Access

**Pros and Cons of Each Approach**

1. **Plain Object Access**
	* Pros: Simple, no additional setup required.
	* Cons: May incur more overhead due to direct property access.
2. **Proxy Access**
	* Pros: Provides a layer of indirection, allowing for custom behavior and caching.
	* Cons: Requires creating a Proxy object and defining its handlers.
3. **Property Access**
	* Pros: Similar to Plain Object Access but with the added benefit of providing a clear intent.
	* Cons: Requires defining an additional property on another object.

**Library Used**

The benchmark uses the built-in `Proxy` object in JavaScript, which allows for creating proxy objects that can intercept and modify access to properties.

**Special JS Feature/Syntax**

None mentioned in this specific benchmark. However, it's worth noting that the use of Proxies is a fundamental feature in JavaScript that enables dynamic property handling and provides a way to implement aspects like caching, logging, or validation.

**Other Alternatives**

If you're looking for alternative approaches to accessing object properties, consider:

* Using `Object.getPrototypeOf()` to access the prototype chain.
* Implementing a custom getter function using `Function.prototype.get()`.
* Utilizing a library like Lodash's `get()` function, which provides a more expressive and flexible way to access nested objects.

**Benchmark Preparation Code Explanation**

The script preparation code creates three variables:

* `object`: an object with a single property `value` containing the string "data".
* `proxy`: a Proxy object created from `object`, without any handlers defined.
* `proxyGet`: another Proxy object created from `object`, this time defining a `get()` handler that simply returns the value of the target object's property.
* `props`: an empty object that will be used as the destination for the `Property Access` benchmark.

The HTML preparation code is not provided, but it would likely involve setting up some sort of input or output to measure the performance of each benchmark.

I hope this explanation helps you understand the JavaScript microbenchmark!

Related benchmarks:

Plain object access vs Proxy vs Property (version: 0)

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

Created: one year ago by: Registered User

Jump to the latest result

Object access

Proxy access

Proxy with get handler access

Property

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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