Event bus or Pub/Sub in browser

Benchmark created on


Description

Comparison between different ways to comunicate between components: browser events, jQuery events or a mitt event emitter.

Preparation HTML

<script src="https://unpkg.com/mitt/dist/mitt.umd.js"></script>
<script src="https://unpkg.com/jquery"></script>

Setup

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

// JQuery
$('body').on(
	'jquery-foo', 
	(event, data) => console.log('foo', data)
);

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

Test runner

Ready to run.

Testing in
TestOps/sec
API Web
// API web
document.dispatchEvent(new CustomEvent(
	'document-foo',
	{
    	detail: { a: 'b' }
    }
));
ready
jQuery body events
// JQuery
$('body').trigger(
	'jquery-foo', 
	{ a: 'b' }
);
ready
Mitt Pub/Sub
emitter.emit(
	'mitt-foo',
	{ a: 'b' }
);
ready

Revisions

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