Benchmark: property access: object with define property vs Proxy get vs plain object

Script Preparation code:

const queryResults = {
  a: {},
  b: [2, 3, 4],
  c: 3,
  d: {
    a: 1,
    b: [],
  },
};

window.queryResults = queryResults;

window.trackedResultsProxy = new Proxy(queryResults, {
  get(target, prop, receiver) {
    return Reflect.get(target, prop, receiver);
  }
});

window.trackedResultsDefineProperty = {};
for (const key of Object.keys(queryResults)) {
  Object.defineProperty(trackedResultsDefineProperty, key, {
    configurable: false,
    enumerable: true,
    get() {
      return queryResults[key];
    },
  });
}

window.trackedResultsGetter = {
  get d() {
    return queryResults.d;
  }
}

Tests:

Proxy
window.trackedResultsProxy.d.a + 5
defineProperty
window.trackedResultsDefineProperty.d.a + 5
getter
window.trackedResultsGetter.d.a + 5
Control (plain object access)
window.queryResults.d.a + 5

Historical Performance Data aggregated from 5 community runs

Desktop Results:

Chrome 5 runs

Control (plain object access)

115.6M/s

defineProperty

108.0M/s

getter

51.6M/s

Proxy

23.9M/s

Fastest: Control (plain object access) (4.8x faster)

View exact numbers

✓ Control (plain object access): 115,631,288 ops/sec
• defineProperty: 108,037,416 ops/sec
• getter: 51,630,096 ops/sec
• Proxy: 23,864,990 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
Proxy
defineProperty
getter
Control (plain object access)

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/148.0.0.0 Safari/537.36 Edg/148.0.0.0

Browser/OS: Chrome 148 on Windows

View result in a separate tab

Control (plain object access)

103.3M/s

defineProperty

102.9M/s

getter

42.8M/s

Proxy

20.7M/s

View exact numbers

Test name	Executions per second
✓ Control (plain object access)	103,338,416 Ops/sec
defineProperty	102,943,800 Ops/sec
getter	42,804,748 Ops/sec
Proxy	20,673,640 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 benchmark and explain what's being tested.

**Benchmark Overview**

The test compares the performance of three approaches to access a property in an object:

1. `Proxy` (using `window.trackedResultsProxy`)
2. `defineProperty` (using `window.trackedResultsDefineProperty`)
3. Direct access (plain object access) (`window.queryResults`)

**Options Compared**

The two custom options (`Proxy` and `defineProperty`) are compared to the most basic option, direct access.

* `Proxy`: uses a Proxy object to intercept property accesses.
* `defineProperty`: uses the `Object.defineProperty()` method to define properties on an object.
* Direct access: simply accesses the property directly on the original object (`queryResults`).

**Pros and Cons**

Here's a brief summary of each approach:

* **Proxy**: Pros:
	+ Can provide more control over property behavior (e.g., transformations, validation).
	+ Can be more efficient for complex or nested properties.
*   Cons:
	+ Requires more overhead to set up the Proxy object.
	+ Might not be supported in older browsers.
*   **defineProperty**: Pros:
	+ Provides a more explicit way to define property behavior (e.g., configurable, enumerable).
	+ Can be more efficient for simple properties.
*   Cons:
	+ May require more code to set up and maintain the properties.
	+ Might not be as flexible as Proxy for complex cases.
*   **Direct Access**: Pros:
	+ Simplest approach, requiring minimal setup.
	+ Most likely to work in all browsers.

**Library Usage**

In this benchmark, two libraries are used:

1. `Proxy`: The built-in JavaScript `Proxy` object is used to create a Proxy instance.
2. No other library is explicitly mentioned; however, the `Object.defineProperty()` method is part of the standard JavaScript API.

**Special JS Features or Syntax**

None of these options rely on special JavaScript features or syntax (e.g., ES6+ classes, generators, etc.).

**Other Alternatives**

If you need to measure the performance of other approaches to access properties in objects, consider exploring alternative methods:

* Using `Object.getPrototypeOf()` and chaining property accesses.
* Utilizing a library like Lodash's `get()` method for more complex cases.
* Implementing a custom iterator or generator function for sequential access.

Keep in mind that each approach may have its own trade-offs, pros, and cons, which can impact performance.

property access: object with define property vs Proxy get vs plain object (version: 0)

Comparing performance of: `Proxy vs defineProperty vs getter vs Control (plain object access)`

Created: 2 years ago by: Guest

Go to the latest result

Proxy

defineProperty

getter

Control (plain object access)

Historical Performance Data aggregated from 5 community runs

Desktop Results:

Chrome 5 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

property access: object with define property vs Proxy get vs plain object (version: 0)

Comparing performance of: Proxy vs defineProperty vs getter vs Control (plain object access)

Created: 2 years ago by: Guest

Go to the latest result

Proxy

defineProperty

getter

Control (plain object access)

Historical Performance Data aggregated from 5 community runs

Desktop Results:

Chrome 5 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: `Proxy vs defineProperty vs getter vs Control (plain object access)`