Run results for: Proxies

Run details:

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: Chrome 131

Operating system: Mac OS X 10.15.7

Device Platform: Desktop

Date tested: one year ago

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

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

proxies vs objects

Object GET

Proxy GET

Simple Proxy GET

Simple Proxy SET

Complex Proxy SET