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);

AخA
 
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;
data2.test = Math.random();
a += data2.test;
proxy
proxy.test = Math.random(); a += proxy.test;
proxy.test = Math.random();
a += proxy.test;
events
pub(data3, 'set-test', Math.random()); pub(data3, 'get-test');
pub(data3, 'set-test', Math.random());
pub(data3, 'get-test');
plain object
data4.test = Math.random(); a += data4.test;
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());
// 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

Experimental features:

Memory measurements supported only in Chrome.
For precise memory measurements Chrome must be launched with --enable-precise-memory-info flag.
More information: Monitoring JavaScript Memory

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: 12 days ago)

User agent: Mozilla/5.0 (X11; Linux x86_64; rv:136.0) Gecko/20100101 Firefox/136.0

Browser/OS: Firefox 136 on Linux

View result in a separate tab

Test name	Executions per second
getter / setter	378371552.0 Ops/sec
proxy	17582520.0 Ops/sec
events	8451159.0 Ops/sec
plain object	428359424.0 Ops/sec
events (kinda cheating)	23594872.0 Ops/sec

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

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:

Getter/Setter (using built-in getter and setter methods)
Proxy (using JavaScript's Proxy API)
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.

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.

### Events

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

**Library and Special JS Feature**

**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: 4 years ago by: Registered User

Jump to the latest result

getter / setter

proxy

events

plain object

events (kinda cheating)