Run results for: Proxies

Run details:

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/112.0.0.0 Safari/537.36

Browser: Chrome 112

Operating system: Windows

Device Platform: Desktop

Date tested: one year ago

Test name	Executions per second
Object GET	1289867904.0 Ops/sec
Proxy GET	17513.5 Ops/sec
Simple Proxy GET	137913.9 Ops/sec
Simple Proxy SET	76202.0 Ops/sec
Complex Proxy SET	14460.4 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