Benchmark: Proxy vs defineProperty, assign to local

Script Preparation code:

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

Tests:

Object access
let x = object.value;
Proxy access
let x = proxy.value
Proxy with get handler access
let x = proxyWithHandler.value
Use of simple getter
let x = object.getData();
Use of defineProperty
let x = object.dataProperty;
Proxy with get reflect handler access
let x = proxyWithReflectHandler.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
Use of simple getter
Use of defineProperty
Proxy with get reflect 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/133.0.0.0 Safari/537.36

Browser/OS: Chrome 133 on Windows

View result in a separate tab

Object access

110.2M/s

Use of simple getter

96.0M/s

Use of defineProperty

94.3M/s

Proxy access

33.5M/s

Proxy with get handler access

23.8M/s

Proxy with get reflect handler access

17.2M/s

View exact numbers

Test name	Executions per second
✓ Object access	110,222,384 Ops/sec
Use of simple getter	95,985,096 Ops/sec
Use of defineProperty	94,309,056 Ops/sec
Proxy access	33,548,720 Ops/sec
Proxy with get handler access	23,838,062 Ops/sec
Proxy with get reflect handler access	17,240,820 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down the provided benchmark and its test cases.

**Benchmark Overview**

The benchmark measures the performance of different approaches to create a proxy object in JavaScript, specifically:

1. `Proxy` constructor with an empty handler
2. `Proxy` constructor with a custom get handler (using `Reflect.get`)
3. `Proxy` constructor with a custom get handler that returns the value directly (`proxyWithHandler`)

The benchmark also includes test cases for accessing the proxy object's properties, using either direct property access or getter methods.

**Library and Special JavaScript Features**

In this benchmark, the following libraries are used:

1. None (only built-in JavaScript features)
2. No special JavaScript features are mentioned or required in this benchmark.

**Benchmark Test Cases**

The test cases can be grouped into three categories:

A) **Direct Property Access**: This category includes test cases where the proxy object is accessed directly, using the `proxy.value` syntax.
	* Pros: Simple and straightforward approach
	* Cons: May involve unnecessary computations or checks (e.g., to determine if the property exists)
B) **Proxy with Custom Get Handler**: This category includes test cases where a custom get handler is used to access the proxy object's properties.
	* Pros: Allows for fine-grained control over property access, reducing unnecessary computations
	* Cons: Requires defining and implementing a custom getter function, which may introduce additional overhead
C) **Proxy with Simple Getter**: This category includes test cases where a simple getter method is used to access the proxy object's properties.
	* Pros: Similar to the custom get handler approach, but uses a built-in feature (getter methods)
	* Cons: May still involve unnecessary computations or checks

**Benchmark Results**

The benchmark results show the performance of each approach on a specific device running Firefox Mobile 122. The top-performing approaches are:

**Alternatives**

Other alternatives to creating proxies in JavaScript include:

1. ** getter methods**: As mentioned earlier, using getter methods is an alternative approach to creating proxies.
2. **Object.defineProperty()**: This method can be used to define getters and setters on objects, but it's not exactly equivalent to creating a proxy object.

In summary, the benchmark measures the performance of different approaches to create a proxy object in JavaScript, including direct property access, custom get handlers, and simple getters. The results show that using `Proxy` constructors with custom get handlers can be faster than other approaches, but the best approach depends on specific use cases and requirements.

Proxy vs defineProperty, assign to local (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 vs Proxy with get reflect handler access`

Created: 2 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

Proxy with get reflect handler access

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 defineProperty, assign to local (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 vs Proxy with get reflect handler access

Created: 2 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

Proxy with get reflect handler access

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