Benchmark: Proxy get like redux state

Script Preparation code:

originalState = {
  a: {},
  b: {},
  c: {},
  d: {},
  e: {},
  f: {},
  g: {},
  h: {},
  i: {},
  j: {},
  k: {},
  l: {},
  m: {},
  n: {},
  o: {},
  p: {},
  q: {},
  r: {},
  s: {},
  t: {},
  u: {},
  v: {},
  w: {},
  x: {},
  y: {},
  z: {},
}
secondState = {
  a: {},
  b: {},
  c: {},
  d: {},
  e: {},
  f: {},
  g: {},
  h: {},
  i: {},
  j: {},
  k: {},
  l: {},
  m: {},
  n: {},
  o: {},
  p: {},
  q: {},
  r: {},
  s: {},
  t: {},
  u: {},
  v: {},
  w: {},
  x: {},
  y: {},
  z: {},
}
originalKeys = new Set(['a']);
function pickBy(obj, fn) {
  return Object.keys(obj).reduce((acc, key) => {
    if (fn(obj[key], key, obj)) {
      acc[key] = obj[key];
    }
    return acc;
  }, {});
};
proxy = new Proxy(secondState, {
  get: (_, prop) =>
    originalKeys.has(prop)
      ? originalState[prop]
      : secondState[prop],
});

Tests:

Just spread
state = { ...originalState, ...pickBy(secondState, (v, k) => !originalKeys.has(k)) }
new proxy everytime
p = new Proxy(secondState, { get: (_, prop) => originalKeys.has(prop) ? originalState[prop] : secondState[prop], }); p.a p.b
One time proxy
proxy.a proxy.b

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Just spread
new proxy everytime
One time proxy

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: one year ago)

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/110.0.0.0 Safari/537.36

Browser/OS: Chrome 110 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
Just spread	153214.7 Ops/sec
new proxy everytime	1424431.1 Ops/sec
One time proxy	2023706.5 Ops/sec

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

LLMs can make mistakes. Check important info.

**Benchmark Overview**

The provided benchmark measures the performance of three different approaches to retrieve values from an object using a Proxy in JavaScript.

**Options Compared**

1. **Just Spread**: This approach uses the spread operator (`...`) to create a new object that includes only the properties that are not present in the `originalState` object.
2. **New Proxy Everytime**: This approach creates a new Proxy instance for each iteration of the benchmark, and then accesses the desired property using dot notation (`p.a`, `p.b`).
3. **One Time Proxy**: This approach creates a single Proxy instance that is used throughout the benchmark, and then accesses the desired properties using the proxy.

**Pros and Cons**

1. **Just Spread**:
	* Pros: Efficient use of spread operator, avoids creating multiple Proxy instances.
	* Cons: May be slower due to string interpolation for property names.
2. **New Proxy Everytime**:
	* Pros: Each iteration is independent, can be useful for certain benchmarking scenarios.
	* Cons: Creates a new Proxy instance on each iteration, which can be resource-intensive.
3. **One Time Proxy**:
	* Pros: Only creates one Proxy instance, avoids the overhead of creating multiple instances.
	* Cons: May lead to cache misses if the same property is accessed multiple times.

**Library and Purpose**

The `pickBy` function is a utility function that filters an object by a given function. It returns a new object with only the properties for which the callback function returns `true`.

**Special JS Feature/Syntax**

None mentioned in this benchmark. However, it's worth noting that Proxy instances are created using the `Proxy` constructor and require careful configuration to achieve the desired behavior.

**Other Considerations**

* The benchmark uses Chrome 110 as the browser, which may not be representative of other browsers.
* The benchmark measures executions per second (ExecutionsPerSecond), which is a common metric for measuring performance.
* The benchmark results are stored in an array, with each object containing metadata such as raw UA string, browser, device platform, operating system, and execution frequency.

**Alternatives**

If you wanted to rewrite this benchmark or try alternative approaches, you could consider the following:

1. **Use a different Proxy configuration**: Experiment with different `get` trap configurations, such as using `has` instead of `originalKeys.has(prop)`.
2. **Try a different filtering approach**: Instead of using `pickBy`, use another filtering function like `Object.keys()`, `Array.prototype.filter()`, or a custom implementation.
3. **Use a benchmarking library**: Consider using a dedicated benchmarking library like `microbenchmark` to simplify the benchmarking process.
4. **Test with different browsers or platforms**: Run the benchmark on other browsers, platforms, or operating systems to ensure its results are representative of your target audience.

Keep in mind that rewriting this benchmark or trying alternative approaches requires careful consideration of performance optimization and edge cases.

Related benchmarks:

Proxy get like redux state (version: 0)

Comparing performance of: Just spread vs new proxy everytime vs One time proxy

Created: one year ago by: Guest

Jump to the latest result

Just spread

new proxy everytime

One time proxy

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