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(); } });

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

Test name	Executions per second
fromEvent	11515.9 Ops/sec
addEventListener	4568.6 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.

Related benchmarks:

fromEvent vs addEventListener (version: 0)

fromEvent vs addEventListener

Comparing performance of: fromEvent vs addEventListener

Created: 2 years ago by: Guest

Jump to the latest result

fromEvent

addEventListener

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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