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

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.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
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
Control (plain object access)

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:128.0) Gecko/20100101 Firefox/128.0

Browser/OS: Firefox 128 on Windows

View result in a separate tab

Test name	Executions per second
Proxy	2333504.5 Ops/sec
defineProperty	2279320.0 Ops/sec
getter	2262087.2 Ops/sec
Proxy w/ Reflection	1683093.9 Ops/sec
Control (plain object access)	2368430.2 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down the provided benchmark and explain what's being tested.

**Benchmark Overview**

The benchmark measures the performance of three different ways to access properties in an object: using a plain object, a Proxy with get() method, and a Proxy without get() method. The benchmark also compares these approaches with another way of accessing properties using `window.queryResults` directly.

**Plain Object Access (Control)**

This approach uses the direct access syntax `window.queryResults.d.a + window.queryResults.c`. This is the simplest way to access properties in an object, and it's often the fastest method.

Pros:

* Simple and easy to read
* Fastest possible performance

Cons:

* May not be suitable for large objects or complex data structures

**Proxy with Get() Method**

This approach uses a Proxy with a get() method. The Proxy is created using `new Proxy(queryResults, { get(target, prop, receiver) { return Reflect.get(target, prop, receiver); } })`. The get() method allows us to customize the behavior of property access.

Pros:

* Provides control over property access and can optimize performance
* Can be used for complex data structures

Cons:

* May introduce additional overhead due to the Proxy creation and get() method calls
* May not be suitable for simple cases where direct access is sufficient

**Proxy without Get() Method**

This approach uses a Proxy without a get() method. The Proxy is created using `new Proxy(queryResults, { get(target, prop, receiver) { return target[prop]; } })`. This Proxy simply delegates property access to the original object.

Pros:

* Simplifies the implementation compared to the Proxy with get() method
* May be suitable for simple cases where direct access is sufficient

Cons:

* Lacks control over property access and may not optimize performance

**Getter**

This approach uses a getter function. The `trackedResultsGetter` object contains two getter functions: `get c()` and `get d()`. These getter functions return the values of `window.queryResults.c` and `window.queryResults.d`, respectively.

Pros:

* Provides control over property access and can optimize performance
* Can be used for complex data structures

Cons:

* May introduce additional overhead due to the getter function calls
* May not be suitable for simple cases where direct access is sufficient

**Proxy with Reflection**

This approach uses a Proxy with reflection. The Proxy is created using `new Proxy(queryResults, { get(target, prop, receiver) { return Reflect.get(target, prop, receiver); } })`. This Proxy uses the `Reflect.get()` method to delegate property access to the original object.

Pros:

* Provides control over property access and can optimize performance
* Can be used for complex data structures

Cons:

* May introduce additional overhead due to the Proxy creation and reflection calls
* May not be suitable for simple cases where direct access is sufficient

**Library: Reflect**

The `Reflect` library is used in the Proxy with Get() method and Proxy with Reflection approaches. The `Reflect.get()` method provides a way to delegate property access to the original object, allowing for optimization and control over property access.

**Special JS Feature or Syntax: None**

There are no special JavaScript features or syntaxes used in this benchmark.

**Alternatives**

Other alternatives to these approaches include:

* Using a library like Lodash or Underscore.js to optimize property access
* Implementing a custom caching mechanism to reduce the number of property accesses
* Using a Just-In-Time (JIT) compiler to optimize performance for specific use cases

Keep in mind that the choice of approach depends on the specific requirements and constraints of the project.

Related benchmarks:

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

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

Created: one year ago by: Guest

Jump to the latest result

Proxy

defineProperty

getter

Proxy w/ Reflection

Control (plain object access)

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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