JSFiddle - React, Tailwind, and code Playground

proxy: performance

by Csaba Hellinger

HTML

<table>
    <tr><td>Normal object</td><td id="object">...</td></tr>
    <tr><td>No-op forwarding proxy</td><td id="noop">...</td></tr>
    <tr><td>Handler using Reflect</td><td id="reflect">...</td></tr>
    <tr><td>Proxy as dynamic handler</td><td id="dynamic">...</td></tr>    
</table>

CSS

table {
    border-collapse: collapse;
}
td {
    border: 1px solid gray;
    padding: 5px;
}

JavaScript

const //COUNT = 50855, // fast: 50855, slow: 50856  W.T.F.
    COUNT = 1000000;

function measure(obj, id) {
	const element = document.getElementById(id),
    	started = performance.now();
   	for (let i = 0; i < COUNT; i += 1) {
    	obj[i] = i;
        obj[i];
        i in obj;
        Object.getOwnPropertyDescriptor(obj, i);
        delete obj[i];  
    }
    element.innerText = Math.round(performance.now() - started);
}

const reflectHandler = {
  	get: (...args) => Reflect.get(...args),
  	set: (...args) => Reflect.set(...args),
  	deleteProperty: (...args) => Reflect.deleteProperty(...args),
  	ownKeys: (...args) => Reflect.ownKeys(...args),
  	has: (...args) => Reflect.has(...args),
  	defineProperty: (...args) => Reflect.defineProperty(...args),
  	getOwnPropertyDescriptor: (...args) => Reflect.getOwnPropertyDescriptor(...args)
};

const dynReflectHandler = new Proxy({}, {
	get (obj, trap) {
    	return function (...args) {
        	return Reflect[trap](...args);
        }
    }
})

measure({}, 'object');
measure(new Proxy({}, {}), 'noop');
measure(new Proxy({}, reflectHandler), 'reflect');
measure(new Proxy({}, dynReflectHandler), 'dynamic');