Benchmark: fromEvent vs addEventListener

HTML Preparation code:

<script src='https://unpkg.com/rxjs@^7/dist/bundles/rxjs.umd.min.js'></script>

Tests:

fromEvent
let { fromEvent, throttleTime, map, scan } = rxjs; fromEvent(document, 'click') .pipe( throttleTime(1000), map((event) => event.clientX), scan((count, clientX) => count + clientX, 0) ) .subscribe((count) => console.log(count));
addEventListener
let count = 0; const rate = 1000; let lastClick = Date.now() - rate; document.addEventListener('click', (event) => { if (Date.now() - lastClick >= rate) { count += event.clientX; console.log(count); lastClick = Date.now(); } });

Historical Performance Data aggregated from 24 community runs

Desktop Results:

Chrome 24 runs

fromEvent

5K/s

addEventListener

2K/s

Fastest: fromEvent (2.6x faster)

View exact numbers

✓ fromEvent: 5,321 ops/sec
• addEventListener: 2,080 ops/sec

Results show median performance across all community submissions. Run this benchmark yourself to verify on your device.

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
fromEvent
addEventListener

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Chrome Mobile 144 on Android

View result in a separate tab

fromEvent

12K/s

addEventListener

5K/s

View exact numbers

Test name	Executions per second
✓ fromEvent	11,516 Ops/sec
addEventListener	4,569 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down the provided benchmark and explain what's being tested, compared options, pros and cons of those approaches, and other considerations.

**Benchmark Description**

The benchmark compares two ways to handle event listeners in JavaScript: `fromEvent` from the RxJS library and the traditional `addEventListener` method. The goal is to determine which approach is faster for a specific use case (measuring the sum of X-coordinates on mouse clicks).

**Options Compared**

1. **RxJS `fromEvent`**: This method allows you to create an observable from an HTML element's events, such as `click`, and perform operations on it using RxJS operators like `throttleTime`, `map`, and `scan`.
2. **Traditional `addEventListener`**: This is the standard way of attaching an event listener to an element in JavaScript.

**Pros and Cons**

1. **RxJS `fromEvent`**:
	* Pros:
		+ Provides a declarative API for handling events, which can be more concise and expressive.
		+ Allows for easier handling of multiple events on the same element.
	* Cons:
		+ May introduce overhead due to the creation of an observable, which may not be necessary for simple event handling.
2. **Traditional `addEventListener`**:
	* Pros:
		+ Lightweight and easy to use.
		+ No overhead from creating an observable.
	* Cons:
		+ More verbose and less declarative than RxJS `fromEvent`.
		+ May require more boilerplate code for complex event handling scenarios.

**Library: RxJS**

RxJS (Reactive Extensions for JavaScript) is a library that provides a framework for reactive programming in JavaScript. It allows you to handle asynchronous data streams using observables, which can be used to process events from HTML elements or other sources. In this benchmark, `fromEvent` is used to create an observable from the `click` event on an HTML element.

**Special JS Feature: None**

The benchmark does not use any special JavaScript features like async/await, promises, or generators. It only uses the standard syntax for event listeners and observable creation.

**Other Considerations**

When deciding between RxJS `fromEvent` and traditional `addEventListener`, consider the following:

* For simple event handling scenarios where you don't need to perform complex operations on events, traditional `addEventListener` might be a better choice.
* For more complex event handling scenarios or when you want to perform operations like debouncing, throttling, or mapping events, RxJS `fromEvent` can provide a more declarative and expressive API.

**Alternatives**

Other alternatives for handling events in JavaScript include:

1. **Lodash**: Provides a set of utility functions for handling events, such as `debounce` and `throttle`.
2. **PapaLib**: A library that provides a simple way to handle events using a declarative API.
3. **Event Emitters**: Some frameworks like React or Angular use event emitters instead of traditional event listeners.

These alternatives might be worth exploring depending on your specific use case and performance requirements.

fromEvent vs addEventListener (version: 0)

fromEvent vs addEventListener

Comparing performance of: `fromEvent vs addEventListener`

Created: 2 years ago by: Guest

Go to the latest result

fromEvent

addEventListener

Historical Performance Data aggregated from 24 community runs

Desktop Results:

Chrome 24 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

fromEvent vs addEventListener (version: 0)

fromEvent vs addEventListener

Comparing performance of: fromEvent vs addEventListener

Created: 2 years ago by: Guest

Go to the latest result

fromEvent

addEventListener

Historical Performance Data aggregated from 24 community runs

Desktop Results:

Chrome 24 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

Related benchmarks

Comparing performance of: `fromEvent vs addEventListener`