Message passing: CustomEvents vs mitt

Benchmark created on August 24, 2023

Preparation HTML

<script>
/**
 * Trigger custom event
 * @param {string} eventName Custom event name
 * @param {any} data Data
 */
function triggerCustomEvent(eventName, data) {
    let event = null;
    if (window.CustomEvent && typeof window.CustomEvent === 'function') {
        event = new CustomEvent(eventName, { detail: data });
    } else {
        event = document.createEvent('CustomEvent');
        event.initCustomEvent(eventName, true, true, data);
    }
    document.body.dispatchEvent(event);
}
</script>
<script src="https://unpkg.com/mitt/dist/mitt.umd.js"></script>

Setup

// API web
document.body.addEventListener(
	'body-foo',
	e => console.log(e.detail)
);

// MITT
const emitter = mitt()
emitter.on(
	'mitt-foo',
	e => console.log('foo', e)
);

Test runner

// API web
triggerCustomEvent(
	'document-foo',
	{ a: 'b' }
);

emitter.emit(
	'mitt-foo',
	{ a: 'b' }
);

Revisions

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

• Revision 1: published on August 24, 2023
• Revision 2: published on August 24, 2023