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

Script Preparation code:

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

Tests:

Proxy
window.trackedResultsProxy.d.a + window.trackedResultsProxy.c
defineProperty
window.trackedResultsDefineProperty.d.a + window.trackedResultsDefineProperty.c
getter
window.trackedResultsGetter.d.a + window.trackedResultsGetter.c
Proxy w/ Reflection
window.trackedResultsReflect.d.a + window.trackedResultsReflect.c
Methods
window.trackedResultsMethods.getD().a + window.trackedResultsMethods.getC()
Control (plain object access)
window.queryResults.d.a + window.queryResults.c

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Proxy
defineProperty
getter
Proxy w/ Reflection
Methods
Control (plain object 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/131.0.0.0 Safari/537.36

Browser/OS: Chrome 131 on Windows

View result in a separate tab

Control (plain object access)

99.4M/s

Methods

95.9M/s

defineProperty

38.0M/s

getter

30.0M/s

Proxy

13.6M/s

Proxy w/ Reflection

12.6M/s

View exact numbers

Test name	Executions per second
✓ Control (plain object access)	99,427,176 Ops/sec
Methods	95,930,040 Ops/sec
defineProperty	38,028,076 Ops/sec
getter	30,045,120 Ops/sec
Proxy	13,578,439 Ops/sec
Proxy w/ Reflection	12,609,169 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 explanation.

**Benchmark Definition**

The provided benchmark measures the performance of different ways to access object properties in JavaScript. The test cases compare four approaches:

1. **Plain Object Access**: Directly accessing properties on an object using dot notation (e.g., `window.queryResults.d.a`).
2. **Define Property**: Using the `Object.defineProperty()` method to define a property on an object and then accessing it.
3. **Proxy Get**: Creating a Proxy object and defining a getter function for a specific property.
4. **Proxy with Reflection**: Creating a Proxy object, defining a getter function for a specific property, and using the `Reflect.get()` method to access the property.

**Options Compared**

Here's what each option does:

1. Plain Object Access: Directly accesses properties on an object using dot notation. The browser can optimize this approach by caching frequently accessed properties.
2. Define Property: Uses the `Object.defineProperty()` method to define a property on an object and then accessing it. This creates a new property descriptor that is cached by the browser, allowing for faster access.
3. Proxy Get: Creates a Proxy object and defines a getter function for a specific property. The getter function returns the value of the property using the `Reflect.get()` method, which allows for more control over how the property is accessed.
4. Proxy with Reflection: Similar to Proxy Get, but uses `Reflect.get()` to access the property.

**Pros and Cons**

Here's a brief summary of each approach:

1. Plain Object Access:
	* Pros: Simple and straightforward.
	* Cons: May involve more overhead due to caching.
2. Define Property:
	* Pros: Caches frequently accessed properties, providing faster access.
	* Cons: Requires explicit definition of property descriptors, which may be slower for large objects.
3. Proxy Get:
	* Pros: Provides fine-grained control over how properties are accessed.
	* Cons: May incur additional overhead due to the use of a Proxy object and `Reflect.get()`.
4. Proxy with Reflection:
	* Pros: Combines the benefits of Proxy Get with the performance of `Reflect.get()`.
	* Cons: Adds an extra layer of complexity compared to Plain Object Access.

**Library**

There are no external libraries used in this benchmark, as it only relies on built-in JavaScript features and standard library functions.

**Special JS Features or Syntax**

The benchmark uses some advanced JavaScript features:

1. **Proxy objects**: Creates Proxy objects using the `Proxy` constructor.
2. **Getter functions**: Defines getter functions for specific properties on Proxy objects.
3. **Reflect.get()**: Uses the `Reflect.get()` method to access property values in a Proxy object.

**Other Alternatives**

If you're interested in exploring alternative approaches, here are some options:

1. **ES6 Object Accessors**: You can use ES6's new object accessors (e.g., `get` on an object literal) for more concise and expressive property access.
2. **Symbol-based Property Access**: Symbols provide a way to create unique property names that don't collide with other properties. This approach can be used in conjunction with Proxy objects or getter functions.

Keep in mind that the performance differences between these approaches may vary depending on the specific use case, browser, and JavaScript version.

I hope this explanation helps you understand the benchmark better!

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

Comparing performance of: `Proxy vs defineProperty vs getter vs Proxy w/ Reflection vs Methods vs Control (plain object access)`

Created: 2 years ago by: Guest

Go to the latest result

Proxy

defineProperty

getter

Proxy w/ Reflection

Methods

Control (plain object access)

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 vs methods (version: 0)

Comparing performance of: Proxy vs defineProperty vs getter vs Proxy w/ Reflection vs Methods vs Control (plain object access)

Created: 2 years ago by: Guest

Go to the latest result

Proxy

defineProperty

getter

Proxy w/ Reflection

Methods

Control (plain object 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: `Proxy vs defineProperty vs getter vs Proxy w/ Reflection vs Methods vs Control (plain object access)`