Benchmark: Access to Proxy vs Object

Script Preparation code:

object = { value: 'data' };
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

Historical Performance Data aggregated from 464 community runs

Desktop Results:

Chrome 322 runs

Object access

14.8M/s

Proxy access

14.3M/s

Proxy with get handler access

6.8M/s

Fastest: Object access (2.2x faster)

View exact numbers

✓ Object access: 14,805,948 ops/sec
• Proxy access: 14,266,912 ops/sec
• Proxy with get handler access: 6,832,534 ops/sec

Firefox 53 runs

Object access

1470.5M/s

Proxy access

307.5M/s

Proxy with get handler access

41.9M/s

Fastest: Object access (35.1x faster)

View exact numbers

✓ Object access: 1,470,489,984 ops/sec
• Proxy access: 307,528,288 ops/sec
• Proxy with get handler access: 41,947,676 ops/sec

Safari 22 runs

Object access

19.5M/s

Proxy access

19.5M/s

Proxy with get handler access

10.6M/s

Fastest: Object access (1.8x faster)

View exact numbers

✓ Object access: 19,457,380 ops/sec
• Proxy access: 19,456,676 ops/sec
• Proxy with get handler access: 10,606,861 ops/sec

Other 10 runs

Object access

9.2M/s

Proxy access

7.5M/s

Proxy with get handler access

3.5M/s

Fastest: Object access (2.6x faster)

View exact numbers

✓ Object access: 9,232,998 ops/sec
• Proxy access: 7,481,487 ops/sec
• Proxy with get handler access: 3,485,632 ops/sec

Mobile Results:

Chrome 44 runs

Object access

9.6M/s

Proxy access

8.9M/s

Proxy with get handler access

3.8M/s

Fastest: Object access (2.6x faster)

View exact numbers

✓ Object access: 9,649,313 ops/sec
• Proxy access: 8,917,138 ops/sec
• Proxy with get handler access: 3,774,656 ops/sec

Safari 13 runs

Object access

410.4M/s

Proxy access

166.8M/s

Proxy with get handler access

101.6M/s

Fastest: Object access (4.0x faster)

View exact numbers

✓ Object access: 410,403,200 ops/sec
• Proxy access: 166,807,232 ops/sec
• Proxy with get handler access: 101,634,056 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 month ago)

User agent: Mozilla/5.0 (Linux; Android 10; K) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/140.0.0.0 Mobile Safari/537.36

Browser/OS: Chrome Mobile 140 on Android

View result in a separate tab

Object access

68.4M/s

Proxy access

27.9M/s

Proxy with get handler access

14.5M/s

View exact numbers

Test name	Executions per second
✓ Object access	68,380,528 Ops/sec
Proxy access	27,948,846 Ops/sec
Proxy with get handler access	14,452,281 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 definition and test cases.

**Benchmark Definition**

The benchmark is defined in JSON format, which includes:

* `Name`: The name of the benchmark, "Access to Proxy vs Object".
* `Description`: An empty string, indicating that no description is provided for this benchmark.
* `Script Preparation Code`: A JavaScript code snippet that creates an object with a value, and then creates two proxies: one using the built-in `Proxy` constructor without any handlers (`proxy`), and another using the same object but with a custom get handler (`proxyWithHandler`). The script also declares variables for these proxies.
* `Html Preparation Code`: An empty string, indicating that no HTML code is needed to prepare for this benchmark.

The purpose of this benchmark is to compare the performance of accessing an object's property directly (using dot notation) versus using a proxy. A proxy is an object that provides access to its target object, but with additional functionality that can be specified during creation.

**Options Compared**

In this benchmark, two options are compared:

1. **Direct Object Access**: The original way to access the `value` property of the object using dot notation (`object.value`).
2. **Proxy-Based Access**: Using a proxy to access the `value` property. There are two variations:
	* `proxy.value`: Using the built-in `Proxy` constructor without any handlers.
	* `proxyWithHandler.value`: Using the same object but with a custom get handler.

**Pros and Cons**

Here's a brief overview of the pros and cons of each approach:

1. **Direct Object Access**:
	* Pros: Simple, fast, and efficient for simple cases.
	* Cons: Can be slower or more memory-intensive if the object is large or complex, as it involves creating a new scope and resolving the property path at runtime.
2. **Proxy-Based Access (with built-in Proxy)**:
	* Pros: Provides additional functionality without modifying the original object, can be faster or more efficient for certain cases.
	* Cons: May introduce additional overhead due to the creation of a proxy object and its associated handlers.
3. **Proxy-Based Access (with custom get handler)**:
	* Pros: Allows for fine-grained control over how properties are accessed, can optimize performance for specific use cases.
	* Cons: Requires more code and configuration, which may introduce additional complexity or overhead.

**Library**

In this benchmark, the `Reflect` library is implicitly used through the `Reflect.get()` function in the custom get handler. The `Reflect` library provides a set of functions that can be used to perform operations on objects without modifying their behavior.

**Special JavaScript Feature/Syntax**

The use of the built-in `Proxy` constructor and the custom get handler (`proxyWithHandler`) is an example of using a proxy in JavaScript. Proxies are a feature introduced in ECMAScript 2015 (ES6) that allow for dynamic and customizable objects.

**Other Alternatives**

For this specific benchmark, other alternatives to compare would be:

* Using `Object.getPrototypeOf()` or `Object.create()` to create a proxy-like object.
* Implementing a custom property accessor function using `Object.defineProperty()`.
* Comparing the performance of using a library like Lodash's `get()` function to access properties.

However, these alternatives might not provide the same level of customization and flexibility as using a built-in `Proxy` constructor or a custom get handler.

Access to Proxy vs Object (version: 4)

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

Created: 6 years ago by: Registered User

Go to the latest result

Object access

Proxy access

Proxy with get handler access

Historical Performance Data aggregated from 464 community runs

Desktop Results:

Chrome 322 runs

Firefox 53 runs

Safari 22 runs

Other 10 runs

Mobile Results:

Chrome 44 runs

Safari 13 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 (version: 4)

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

Created: 6 years ago by: Registered User

Go to the latest result

Object access

Proxy access

Proxy with get handler access

Historical Performance Data aggregated from 464 community runs

Desktop Results:

Chrome 322 runs

Firefox 53 runs

Safari 22 runs

Other 10 runs

Mobile Results:

Chrome 44 runs

Safari 13 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`