Benchmark: Proxy size - MeasureThat.net

Script Preparation code:

function prep(){
 class BigFoo {
       constructor() {
           this.b = 2;
           this.c = 2;
           this.d = 2;
           this.e = 2;
           this.f = 2;
           this.g = 2;
           this.h = 2;
       }
       j() {}
       k() {}
       l() {}
       m() {}
       n() {}
       o() {}
       p() {}
   }

   class LilFoo {
       constructor() {
           this.a = 1;
       }
       i() {}
   }

   const handlersP = {
       get: (target, key) => target[key],
       set: (target, key, val) => {
           target[key] = val;
       },
   };

   const handlersD = {
       get() {
           return bValue;
       },
       set(newValue) {
           bValue = newValue;
       },
   };
return {BigFoo, LilFoo, handlersP, handlersD}
}


   function _proxy(target, handlers) {
       for (const key in target) {
           Object.defineProperty(target, key, handlers);
       }
   }

Tests:

Large Proxy - literal
const {BigFoo, LilFoo, handlersP, handlersD} = prep(); const _foo = { a: 1, i: () => {}, }; const bigFoo = { b: 2, c: 2, d: 2, e: 2, f: 2, g: 2, h: 2, j: () => {}, k: () => {}, l: () => {}, m: () => {}, n: () => {}, o: () => {}, p: () => {}, }; const proxy = new Proxy(bigFoo, handlersP);
Small Proxy - literal
const {BigFoo, LilFoo, handlersP, handlersD} = prep(); const _foo = { b: 2, c: 2, d: 2, e: 2, f: 2, g: 2, h: 2, j: () => {}, k: () => {}, l: () => {}, m: () => {}, n: () => {}, o: () => {}, p: () => {}, }; const lilFoo = { a: 1, i: () => {}, }; const proxy = new Proxy(lilFoo, handlersP)
Large Proxy - class
const {BigFoo, LilFoo, handlersP, handlersD} = prep(); const _foo = { a: 1, i: () => {}, }; const bigFoo = new BigFoo(); const proxy = new Proxy(bigFoo, handlersP)
Small Proxy - class
const {BigFoo, LilFoo, handlersP, handlersD} = prep(); const _foo = { b: 2, c: 2, d: 2, e: 2, f: 2, g: 2, h: 2, j: () => {}, k: () => {}, l: () => {}, m: () => {}, n: () => {}, o: () => {}, p: () => {}, }; const lilFoo = new LilFoo(); const proxy = new Proxy(lilFoo, handlersP)
Large GetterSetter - literal
const {BigFoo, LilFoo, handlersP, handlersD} = prep(); const _foo = { a: 1, i: () => {}, }; const bigFoo = { b: 2, c: 2, d: 2, e: 2, f: 2, g: 2, h: 2, j: () => {}, k: () => {}, l: () => {}, m: () => {}, n: () => {}, o: () => {}, p: () => {}, }; const proxy = _proxy(bigFoo, handlersD);
Small GetterSetter - literal
const {BigFoo, LilFoo, handlersP, handlersD} = prep(); const _foo = { b: 2, c: 2, d: 2, e: 2, f: 2, g: 2, h: 2, j: () => {}, k: () => {}, l: () => {}, m: () => {}, n: () => {}, o: () => {}, p: () => {}, }; const lilFoo = { a: 1, i: () => {}, }; const proxy = _proxy(lilFoo, handlersD);
Large GetterSetter - class
const {BigFoo, LilFoo, handlersP, handlersD} = prep(); const _foo = { a: 1, i: () => {}, }; const bigFoo = new BigFoo(); const proxy = _proxy(bigFoo, handlersD);
Small GetterSetter - class
const {BigFoo, LilFoo, handlersP, handlersD} = prep(); const _foo = { b: 2, c: 2, d: 2, e: 2, f: 2, g: 2, h: 2, j: () => {}, k: () => {}, l: () => {}, m: () => {}, n: () => {}, o: () => {}, p: () => {}, }; const lilFoo = new LilFoo(); const proxy = _proxy(lilFoo, handlersD);
control case
const {BigFoo, LilFoo, handlersP, handlersD} = prep(); const _foo = { a: 1, i: () => {}, }; const bigFoo = { b: 2, c: 2, d: 2, e: 2, f: 2, g: 2, h: 2, j: () => {}, k: () => {}, l: () => {}, m: () => {}, n: () => {}, o: () => {}, p: () => {}, }; const proxy = bigFoo;

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Large Proxy - literal
Small Proxy - literal
Large Proxy - class
Small Proxy - class
Large GetterSetter - literal
Small GetterSetter - literal
Large GetterSetter - class
Small GetterSetter - class
control case

Fastest: N/A

Slowest: N/A

ⓘ Get performance results from real users on your website with Request Metrics.

Website Performance Monitoring by Request Metrics

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/605.1.15 (KHTML, like Gecko) Version/15.5 Safari/605.1.15

Browser/OS: Safari 15 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
Large Proxy - literal	692290.4 Ops/sec
Small Proxy - literal	729450.3 Ops/sec
Large Proxy - class	660805.4 Ops/sec
Small Proxy - class	674105.8 Ops/sec
Large GetterSetter - literal	119049.3 Ops/sec
Small GetterSetter - literal	429681.2 Ops/sec
Large GetterSetter - class	193766.1 Ops/sec
Small GetterSetter - class	491475.6 Ops/sec
control case	890467.6 Ops/sec

Proxy size (version: 0)

Comparing performance of: Large Proxy - literal vs Small Proxy - literal vs Large Proxy - class vs Small Proxy - class vs Large GetterSetter - literal vs Small GetterSetter - literal vs Large GetterSetter - class vs Small GetterSetter - class vs control case

Created: one year ago by: Registered User

Jump to the latest result

Large Proxy - literal

Small Proxy - literal

Large Proxy - class

Small Proxy - class

Large GetterSetter - literal

Small GetterSetter - literal

Large GetterSetter - class

Small GetterSetter - class

control case

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A