Benchmark: JS Events Emitting

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>

Script Preparation code:

var e = new Eev();
var c = 0;

e.on('go', function (d) {
  ++c;
});

e.on('go', function (d) {
  ++c;
});

var e$ = $({});
var c = 0;

e$.on('go', function (d) {
  ++c;
});

e$.on('go', function (d) {
  ++c;
});

var c = 0;

document.addEventListener('go', function(d) {
  ++c;
});

document.addEventListener('go', function(d) {
  ++c;
});

var emitter = window.mitt();
 var c = 0;
// listen to an event
emitter.on('foo', function(d){
++c;
} );
 
emitter.on('foo', function(d){
++c;
} );

Tests:

EEV
e.emit('go', 'hi');
JQuery
e$.trigger('go', 'hi');
Dom
document.dispatchEvent(new CustomEvent('go', { detail:'hi' }));
Mitt
emitter.emit('foo', { 'hello':'' });

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
EEV
JQuery
Dom
Mitt

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: one year ago)

User agent: Mozilla/5.0 (Linux; Android 10; K) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/131.0.0.0 Mobile Safari/537.36

Browser/OS: Chrome Mobile 131 on Android

View result in a separate tab

Test name	Executions per second
EEV	5619138.0 Ops/sec
JQuery	160335.2 Ops/sec
Dom	134585.2 Ops/sec
Mitt	3787484.8 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 `MeasureThat.net` benchmark measures the performance of various event emitter options in JavaScript. The benchmark consists of four test cases:

1. **EEV**: Emits an event using the `Eev` library, which is a custom implementation of an event emitter.
2. **JQuery**: Emits an event using jQuery's `$` function, which has built-in support for event emitters.
3. **Dom**: Emits an event using the `dispatchEvent` method on a DOM element.
4. **Mitt**: Emits an event using the `mitt` library, a popular JavaScript event emitter.

**Options Compared**

The benchmark compares the performance of these four options:

*   **EEV (Eev)**: A custom implementation of an event emitter, which is part of the benchmark script itself.
*   **JQuery**: The `$` function in jQuery, which has built-in support for event emitters.
*   **Dom**: The `dispatchEvent` method on a DOM element, which can be used to emit events.
*   **Mitt**: A popular JavaScript event emitter library.

**Pros and Cons of Each Approach**

Here's a brief overview of the pros and cons of each approach:

1.  **EEV (Eev)**:
    *   Pros: Custom implementation allows for fine-grained control over event emission, can be optimized for specific use cases.
    *   Cons: Requires custom code and maintenance, may not be as efficient as built-in or external libraries.
2.  **JQuery**:
    *   Pros: Built-in support for event emitters, widely adopted and well-maintained library.
    *   Cons: May introduce additional overhead due to jQuery's size and complexity.
3.  **Dom**:
    *   Pros: Simple and lightweight approach that leverages the browser's built-in DOM functionality.
    *   Cons: May not provide fine-grained control over event emission, can be slower than dedicated event emitters.
4.  **Mitt**:
    *   Pros: High-performance event emitter library with customizable options.
    *   Cons: Additional dependency on a separate library.

**Libraries and Special Features**

*   **Eev**: The `Eev` library is a custom implementation of an event emitter, which is part of the benchmark script itself. It provides fine-grained control over event emission but requires custom code and maintenance.
*   No special JavaScript features are mentioned in this explanation.

**Alternatives**

If you're looking for alternative event emitter libraries, some popular options include:

*   **EventEmitter**: A built-in Node.js module that provides a simple implementation of an event emitter.
*   **RxJS**: A reactive extensions library for JavaScript that includes an event emitter component.
*   **Eventemitter2**: A high-performance event emitter library for Node.js and other environments.

Related benchmarks:

JS Events Emitting (version: 0)

Comparing Various Event Emitter Options

Comparing performance of: EEV vs JQuery vs Dom vs Mitt

Created: 3 years ago by: Guest

Jump to the latest result

EEV

JQuery

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):