Benchmark: Proxies - MeasureThat.net

Script Preparation code:


function proxy(initialState) {
    if (!(typeof initialState === "object" && initialState !== null) && Array.isArray(initialState)) {
        throw new Error("proxy must be an object or an array");
    }

    const handler = {
        get(target, property) {
            return target[property];
        },

        set(target, property, value) {
            // Short-circuit if value changed is the same, prevents performance issues.
            if (target[property] === value) return true;

            // initialised ?? customLog(target, property, value);
            console.log(target, property, value);

            if (typeof value === "object") {
                value = proxy(value);
            }

           return target[property] = value;
             
        },
    };

    const proxiedObject = new Proxy({}, handler);

    /**
     * We need to loop the state manually inorder to convert the deeply nested
     * objects into proxies.
     *
     * Initially the proxied object is {} empty.
     * When we loop, we take every key from the initialState passed as parameter and  set it in the proxiedObject along with it's value. When this is done, the set() TRAP is called internally. During which we check if the initalState's value is an array or object. If so, we wrap it in another Proxy and set it as the value to the parent proxiedObject.
     */
    for (const key in initialState) {
        proxiedObject[key] = initialState[key];
    }

    initialised = true;

    return proxiedObject;
}

Tests:

Object GET
const testObj = {a:1,b:2,c:[1,2,3],d:{e:1000}}; testObj.a; testObj.d.e; testObj.c[2];
Proxy GET
const testObj = proxy({a:1,b:2,c:[1,2,3],d:{e:1000}}); testObj.a; testObj.d.e; testObj.c[2];
Simple Proxy GET
const testObj = proxy({a:1}) testObj.a;
Simple Proxy SET
const testObj = proxy({a:1}) testObj.a = 100; testObj.a
Complex Proxy SET
const testObj = proxy({a:1,b:2,c:[1,2,3],d:{e:1000}}); testObj.a; testObj.d.e = 'meow'; testObj.c[2] = 'apple';

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Object GET
Proxy GET
Simple Proxy GET
Simple Proxy SET
Complex Proxy SET

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/131.0.0.0 Safari/537.36

Browser/OS: Chrome 131 on Mac OS X 10.15.7

View result in a separate tab

Object GET

241.1M/s

Simple Proxy GET

402K/s

Simple Proxy SET

204K/s

Proxy GET

50K/s

Complex Proxy SET

40K/s

View exact numbers

Test name	Executions per second
✓ Object GET	241,062,288 Ops/sec
Simple Proxy GET	402,047 Ops/sec
Simple Proxy SET	204,299 Ops/sec
Proxy GET	49,771 Ops/sec
Complex Proxy SET	40,206 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's dive into the world of proxies in JavaScript.

**What are Proxies?**

In JavaScript, a proxy is an object that acts as a middleman between an application and a target object. It intercepts access to the target object's properties and methods, allowing you to perform additional actions or transformations before or after accessing the original property or method.

**Options Compared in this Benchmark**

The benchmark compares different approaches to using proxies:

1. **Plain Objects**: This is the baseline for comparison. It tests how the browser performs when accessing properties directly on an object.
2. **Proxies**: This option uses the `Proxy` constructor to create a proxy object that intercepts access to its own properties and methods.
3. **Simple Proxy GET**: In this variant, the proxy is created with only the `get` trap set, allowing only reading of properties.
4. **Simple Proxy SET**: Similar to the previous one, but with only the `set` trap set, allowing only setting of properties.
5. **Complex Proxy SET**: This option uses both the `get` and `set` traps, allowing both reading and writing of properties.

**Pros and Cons of each approach**

* **Plain Objects**:
	+ Pros: Simple to create, no overhead.
	+ Cons: No control over access to properties.
* **Proxies**:
	+ Pros: Allows for fine-grained control over access to properties.
	+ Cons: More complex to create, requires understanding of traps and handlers.
* **Simple Proxy GET**:
	+ Pros: Easy to create and understand, only reading is allowed.
	+ Cons: No writing is allowed, which might not be suitable for all use cases.
* **Simple Proxy SET**:
	+ Pros: Allows writing of properties, but only in the `set` trap.
	+ Cons: Requires careful handling of invalid values.
* **Complex Proxy SET**:
	+ Pros: Combines reading and writing, with fine-grained control over access.
	+ Cons: More complex to create and understand.

**Libraries Used**

None. This benchmark uses only built-in JavaScript features.

**Special JS Features or Syntax**

No special features or syntax are used in this benchmark. It only relies on standard JavaScript features like `Proxy`, `Object.create()`, and the `set()` method.

**Other Alternatives**

If you need more control over object access, you might consider using other approaches:

* **Decorators**: A feature introduced in ECMAScript 2018 (ES10), which allows for function wrappers that can modify or extend the behavior of a target function.
* **Aspect-Oriented Programming (AOP)**: A programming paradigm that aims to increase modularity by allowing separation of cross-cutting concerns. It's not directly related to JavaScript, but there are some libraries and approaches that implement AOP in JavaScript.

Keep in mind that each approach has its own trade-offs and use cases. The choice ultimately depends on the specific requirements of your project or application.

Proxies (version: 0)

proxies vs objects

Comparing performance of: `Object GET vs Proxy GET vs Simple Proxy GET vs Simple Proxy SET vs Complex Proxy SET`

Created: 3 years ago by: Guest

Go to the latest result

Object GET

Proxy GET

Simple Proxy GET

Simple Proxy SET

Complex Proxy SET

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

Proxies (version: 0)

proxies vs objects

Comparing performance of: Object GET vs Proxy GET vs Simple Proxy GET vs Simple Proxy SET vs Complex Proxy SET

Created: 3 years ago by: Guest

Go to the latest result

Object GET

Proxy GET

Simple Proxy GET

Simple Proxy SET

Complex Proxy SET

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: `Object GET vs Proxy GET vs Simple Proxy GET vs Simple Proxy SET vs Complex Proxy SET`