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

Historical Performance Data aggregated from 80 community runs

Desktop Results:

Chrome 53 runs

events (kinda cheating)

3.7M/s

plain object

3.7M/s

proxy

3.0M/s

getter / setter

2.6M/s

events

1.4M/s

Fastest: events (kinda cheating) (2.6x faster)

View exact numbers

✓ events (kinda cheating): 3,745,178 ops/sec
• plain object: 3,677,425 ops/sec
• proxy: 2,997,401 ops/sec
• getter / setter: 2,557,440 ops/sec
• events: 1,443,422 ops/sec

Firefox 11 runs

plain object

275.7M/s

getter / setter

259.6M/s

events (kinda cheating)

12.1M/s

proxy

6.6M/s

events

3.8M/s

Fastest: plain object (72.0x faster)

View exact numbers

✓ plain object: 275,740,992 ops/sec
• getter / setter: 259,560,832 ops/sec
• events (kinda cheating): 12,147,475 ops/sec
• proxy: 6,618,441 ops/sec
• events: 3,829,485 ops/sec

Safari 7 runs

events (kinda cheating)

5.5M/s

getter / setter

5.2M/s

proxy

5.1M/s

plain object

5.0M/s

events

2.0M/s

Fastest: events (kinda cheating) (2.8x faster)

View exact numbers

✓ events (kinda cheating): 5,467,686 ops/sec
• getter / setter: 5,151,626 ops/sec
• proxy: 5,112,380 ops/sec
• plain object: 4,998,705 ops/sec
• events: 1,968,894 ops/sec

Mobile Results:

Chrome 9 runs

events (kinda cheating)

1.9M/s

plain object

1.7M/s

proxy

1.5M/s

getter / setter

1.3M/s

events

752K/s

Fastest: events (kinda cheating) (2.6x faster)

View exact numbers

✓ events (kinda cheating): 1,932,618 ops/sec
• plain object: 1,740,654 ops/sec
• proxy: 1,472,226 ops/sec
• getter / setter: 1,287,146 ops/sec
• events: 752,225 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
getter / setter
proxy
events
plain object
events (kinda cheating)

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Firefox 146 on Windows

View result in a separate tab

plain object

275.7M/s

getter / setter

263.9M/s

events (kinda cheating)

17.0M/s

proxy

6.7M/s

events

4.6M/s

View exact numbers

Test name	Executions per second
✓ plain object	275,740,992 Ops/sec
getter / setter	263,887,376 Ops/sec
events (kinda cheating)	16,962,946 Ops/sec
proxy	6,661,740 Ops/sec
events	4,586,212 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, 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.

Getter / Setter vs Proxy vs Events (version: 2) Benchmark.js

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

Created: 5 years ago by: Registered User

Go to the latest result

getter / setter

proxy

events

plain object

events (kinda cheating)

Historical Performance Data aggregated from 80 community runs

Desktop Results:

Chrome 53 runs

Firefox 11 runs

Safari 7 runs

Mobile Results:

Chrome 9 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

Getter / Setter vs Proxy vs Events (version: 2) Benchmark.js

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

Created: 5 years ago by: Registered User

Go to the latest result

getter / setter

proxy

events

plain object

events (kinda cheating)

Historical Performance Data aggregated from 80 community runs

Desktop Results:

Chrome 53 runs

Firefox 11 runs

Safari 7 runs

Mobile Results:

Chrome 9 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: `getter / setter vs proxy vs events vs plain object vs events (kinda cheating)`