Benchmark: Getter / Setter vs Proxy vs Events

Script Preparation code:

data1 = {};
handler = {
  get: (target, prop) => (target[prop]),
  set: (target, prop, value) => (target[prop] = value),
};
proxy = new  Proxy(data1, handler);
data2 = {
  get test() {
    return this._test;
  },
  set test(value) {
    return this._test = value;
  }
};
const EVENTS = new WeakMap();
function pub(object, event, data) {
  if (!EVENTS.has(object)) { return; }
  const callbacks = EVENTS.get(object)[event];
  if (callbacks) {
    for (const callback of callbacks) {
      callback(data);
    }
  }
}
function sub(object, event, callback) {
  let dict;
  if (!EVENTS.has(object)) {
    EVENTS.set(object, dict={});
  } else {
    dict = EVENTS.get(object);
  }
  let evList;
  if (event in dict) {
    (evList = dict[event]).push(callback);
  } else {
    evList = dict[event] = [callback];
  }
  return function unsub() {
    evList.splice(evList.indexOf(callback), 1);
  }
}
data3 = {};
sub(data3, 'set-test', v => data3.test = v);
sub(data3, 'get-test', () => pub(data3, 'getting-test', data3.test));
sub(data3, 'getting-test', v => a += v);
var a = 0;
data4 = {};
data5 = {};
sub(data5, 'set-test', v => { data5.test = v; pub(data5, 'getting-test', data3.test); });
sub(data5, 'getting-test', v => a += v);

Tests:

getter / setter
data2.test = Math.random(); a += data2.test;
proxy
proxy.test = Math.random(); a += proxy.test;
events
pub(data3, 'set-test', Math.random()); pub(data3, 'get-test');
plain object
data4.test = Math.random(); a += data4.test;
events (kinda cheating)
// note that is almost certainly not accurate since it probably ends after this function is called, not when getting-test triggers pub(data3, 'set-test', Math.random());

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
getter / setter
proxy
events
plain object
events (kinda cheating)

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 24 days ago)

User agent: Mozilla/5.0 (iPhone; CPU iPhone OS 18_1_1 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) CriOS/131.0.6778.73 Mobile/15E148 Safari/604.1

Browser/OS: Chrome Mobile iOS 131 on iOS 18.1.1

View result in a separate tab

Test name	Executions per second
getter / setter	132201376.0 Ops/sec
proxy	120796304.0 Ops/sec
events	23425404.0 Ops/sec
plain object	113779280.0 Ops/sec
events (kinda cheating)	53894604.0 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down the benchmark and explain what's being tested, along with their pros and cons.

**Benchmark Overview**

The benchmark measures the performance of three different approaches to updating a value in an object:

1. Getter/Setter (using built-in getter and setter methods)
2. Proxy (using JavaScript's Proxy API)
3. Events (using WeakMap to store event listeners)

Each test case has a unique variation, which we'll discuss below.

**Options Compared**

Here are the options being compared, along with their pros and cons:

### Getter/Setter

* **Pros:** Fastest and most straightforward approach.
* **Cons:** May incur overhead due to built-in getter and setter methods.

The getter/setter method uses JavaScript's built-in `get` and `set` methods to update the value. This approach is fast but may incur additional overhead due to the internal workings of these methods.

### Proxy

* **Pros:** Provides a high degree of customization and control over updates.
* **Cons:** Can be slower than getter/setter due to the complexity of the proxy implementation.

The Proxy API creates a new proxy object that intercepts and modifies values before they are updated. This approach provides more control over updates but can be slower due to the additional overhead.

### Events

* **Pros:** Lightweight and efficient, making it suitable for large-scale applications.
* **Cons:** May incur additional memory usage due to the WeakMap data structure.

The Events approach uses a WeakMap to store event listeners, which allows for lightweight and efficient updates. However, this approach may incur additional memory usage due to the storage of these listeners.

**Library and Special JS Feature**

In this benchmark, we don't see any specific libraries being used beyond JavaScript's built-in features (e.g., Proxy API). There are no special JS features being tested; however, some nuances of the Events approach require a basic understanding of WeakMap and event handling in JavaScript.

**Other Alternatives**

To compare with these approaches, developers might consider other alternatives:

* **Using a library or framework**: Depending on the project requirements, using a library or framework like React, Angular, or Vue.js could provide a faster and more efficient way to update values.
* **Using a caching mechanism**: Implementing a caching mechanism, such as LRU Cache, could potentially reduce the overhead of updates by storing frequently accessed values.
* **Optimizing the getter/setter method**: By manually optimizing the getter/setter implementation (e.g., using inline caching), developers might be able to close the performance gap with Proxy or Events.

Keep in mind that these alternatives depend on the specific requirements and constraints of the project, as well as the chosen programming paradigm and technology stack.

Related benchmarks:

Getter / Setter vs Proxy vs Events (version: 2)

Comparing performance of: getter / setter vs proxy vs events vs plain object vs events (kinda cheating)

Created: 3 years ago by: Registered User

Jump to the latest result

getter / setter

proxy

events

plain object

events (kinda cheating)

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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