One big proxy, or many listeners

Benchmark created on

Setup

// used to remove listeners after test so they
// don't pile up between runs.
const cleanup = [];

// assume 1000 handlers setup in some way
const HANDLER_COUNT = 1000;

const sendEvent = (i) => {
  window.postMessage(i, '*');
}

function addListener(f) {
  window.addEventListener('message', f);
  cleanup.push(() => {
	window.removeEventListener('message', f);
  });
}

Teardown

cleanup.forEach(f => f());

Test runner

Ready to run.

Testing in
TestOps/sec
one big listener that proxies
const handlers = {};
const promises = [];

for (let i = 0; i < HANDLER_COUNT; i++) {
  const d = Promise.withResolvers();
  promises.push(d.promise);
  handlers[i] = [
    (e) => d.resolve(),
  ];
}

addListener((e) => {
  handlers[e.data]?.forEach(f => f(e));
});

for (let i = 0; i < HANDLER_COUNT; i++) {
  sendEvent(i);
}

Promise.all(promises).then(() => {
	deferred.resolve();
});
ready
lots of listeners
const promises = [];

for (let i = 0; i < HANDLER_COUNT; i++) {
  const d = Promise.withResolvers();
  promises.push(d.promise);
  addListener((e) => {
	if (e.data === i) {
	  d.resolve();
	}
  });
}

for (let i = 0; i < HANDLER_COUNT; i++) {
  sendEvent(i);
}

Promise.all(promises).then(() => {
	deferred.resolve();
});
ready

Revisions

You can edit these tests or add more tests to this page by appending /edit to the URL.