Benchmark: JS Events - MeasureThat.net

HTML Preparation code:

<script>
var Eev=function(){function e(e){this.head=new t,this.tail=new t(this.head),this.head.next=this.tail,this.linkConstructor=e,this.reg={}}function t(e,t,i){this.prev=e,this.next=t,this.fn=i||n}function n(){}function i(){this.events={}}var r=0;return e.prototype={insert:function(e){var n=new t(this.tail.prev,this.tail,e);return n.next.prev=n.prev.next=n,n},remove:function(e){e.prev.next=e.next,e.next.prev=e.prev}},t.prototype.run=function(e){this.fn(e),this.next&&this.next.run(e)},i.prototype={on:function(t,n){var i=this;t.split(/\W+/g).forEach(function(t){var o=i.events[t]||(i.events[t]=new e),s=n._eev||(n._eev=++r);o.reg[s]||(o.reg[s]=o.insert(n))})},off:function(e,t){var n=this;e.split(/\W+/g).forEach(function(e){var i=n.events[e],r=i.reg[t._eev];i.reg[t._eev]=void 0,i&&r&&i.remove(r)})},emit:function(e,t){var n=this.events[e];n&&n.head.run(t)}},i}();!function(e,t){var n=e.define;n&&n.amd?n([],t):"undefined"!=typeof module&&module.exports&&(module.exports=t())}(this,function(){return Eev});
//# sourceMappingURL=eev.min.js.map
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="https://unpkg.com/mitt/dist/mitt.umd.js"></script>

Tests:

EEV
var e = new Eev(); var c = 0; e.on('go', function (d) { ++c; }); e.on('go', function (d) { ++c; }); e.emit('go', 'hi');
JQeury
var e$ = $({}); var c = 0; e$.on('go', function (d) { ++c; }); e$.on('go', function (d) { ++c; }); e$.trigger('go', 'hi');
Dom
var c = 0; document.addEventListener('go', function(d) { ++c; }); document.addEventListener('go', function(d) { ++c; }); document.dispatchEvent(new CustomEvent('go', { detail:'hi' }));
Mitt
var emitter = window.mitt(); var c = 0; // listen to an event emitter.on('foo', function(d){ ++c; } ); emitter.on('foo', function(d){ ++c; } ); emitter.emit('foo', { 'hello':'' });

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
EEV
JQeury
Dom
Mitt

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 9 months ago)

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/139.0.0.0 Safari/537.36

Browser/OS: Chrome 139 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
EEV	5183741.5 Ops/sec
JQeury	819872.4 Ops/sec
Dom	280.4 Ops/sec
Mitt	14430639.0 Ops/sec

Autogenerated LLM Summary (model llama3.2:3b, generated one year ago):

LLMs can make mistakes. Check important info.

**Overview of the Benchmark**

The benchmark measures the performance of different event emitter libraries in JavaScript: Eev (EEV), jQuery's `$` (JQeury), and Document Object Model (DOM) events.

**Event Emitters Compared**

1. **Eev (EEV)**: A custom-built event emitter library, specifically designed for this benchmark.
2. **jQuery's `$` (JQeury)**: The popular jQuery library's `$` function, which has an event emitter method.
3. **Document Object Model (DOM) events**: Native DOM events, triggered by the browser when a specific event occurs (e.g., "go").

**Options Compared**

The benchmark compares the performance of each event emitter option:

* Eev (EEV): Uses a custom-built event emitter implementation with a `run` method that iterates through all registered listeners.
* JQeury: Uses jQuery's `$` function to attach an event listener, which triggers the event and fires all attached listeners.
* DOM events: Allows native browser events to be triggered programmatically using `dispatchEvent()` or `addEventListener()`.

**Pros and Cons of Each Approach**

1. **Eev (EEV)**:
	* Pros: Custom-built implementation might offer better performance due to optimized code.
	* Cons: Not a widely used library, might not be compatible with other projects.
2. **JQeury**:
	* Pros: Well-established and widely adopted jQuery library, easy integration.
	* Cons: Might have overhead due to jQuery's overall size and complexity.
3. **DOM events**:
	* Pros: Native browser events are optimized for performance and compatibility.
	* Cons: Requires JavaScript code to trigger the event, which can add latency.

**Library Descriptions**

1. **Eev (EEV)**: A custom-built event emitter library specifically designed for this benchmark.
2. **jQuery's `$` (JQeury)**: The popular jQuery library's `$` function has an event emitter method that allows attaching listeners to events.
3. **Document Object Model (DOM) events**: Native DOM events, triggered by the browser when a specific event occurs.

**Special JS Features**

The benchmark does not use any special JavaScript features or syntax beyond standard ES6 functionality.

**Alternatives**

If you need an alternative to Eev (EEV), consider:

1. **Mitt**: A lightweight and modular event emitter library, also used in this benchmark.
2. **EventEmmiterJS**: Another popular event emitter library for JavaScript applications.
3. **Native DOM events**: If you're comfortable with native browser events, you can use `dispatchEvent()` or `addEventListener()` to trigger events.

Keep in mind that the choice of event emitter depends on your project's specific requirements and constraints.

Related benchmarks:

JS Events (version: 0)

Comparing Various Event Emitter Options

Comparing performance of: EEV vs JQeury vs Dom vs Mitt

Created: 6 years ago by: Registered User

Jump to the latest result

EEV

JQeury

Dom

Mitt

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated one year ago):