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

Browser: Chrome 115

Operating system: Mac OS X 10.15.7

Device Platform: Desktop

Date tested: one year ago

Test name	Executions per second
Object GET	752932992.0 Ops/sec
Proxy GET	17011.9 Ops/sec
Simple Proxy GET	141661.1 Ops/sec
Simple Proxy SET	84032.1 Ops/sec
Complex Proxy SET	15352.7 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