Benchmark: Cost of adding and removing events

HTML Preparation code:


<div id='element'></div>

Script Preparation code:

const element = document.getElementById('element');

Tests:

Adding and removing event listeners
const callback = () => { console.log('x') } element.addEventListener('click', callback); element.removeEventListener('click', callback);
Null
null

Historical Performance Data aggregated from 6 community runs

Desktop Results:

Chrome 6 runs

Null

159.3M/s

Adding and removing event listeners

1.7M/s

Fastest: Null (94.1x faster)

View exact numbers

✓ Null: 159,279,904 ops/sec
• Adding and removing event listeners: 1,692,645 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
Adding and removing event listeners
Null

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/135.0.0.0 Safari/537.36

Browser/OS: Chrome 135 on Windows

View result in a separate tab

Null

129.3M/s

Adding and removing event listeners

2.8M/s

View exact numbers

Test name	Executions per second
✓ Null	129,327,048 Ops/sec
Adding and removing event listeners	2,759,040 Ops/sec

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

LLMs can make mistakes. Check important info.

I'll break down the provided JSON benchmark definition, test cases, and latest benchmark result.

**Benchmark Definition**

The provided JSON represents a JavaScript microbenchmark that tests the cost of adding and removing events from an HTML element. Here's what's being tested:

* A callback function `callback` is defined to log the string 'x' to the console.
* The element with the ID "element" is retrieved using `document.getElementById('element')`.
* An event listener is added to the element, passing the `callback` function as an argument. This is done using the `addEventListener` method.
* Immediately after adding the event listener, another event listener is removed from the same element, also passing the same `callback` function.

The benchmark definition script preparation code and HTML preparation code are provided, allowing users to run the benchmark with a specific setup.

**Options compared**

In this benchmark, two main options are being compared:

1. **Adding an event listener**: This involves calling the `addEventListener` method on the element.
2. **Removing an event listener**: This involves calling the `removeEventListener` method on the same element.

**Pros and Cons of those different approaches**

* Adding an event listener:
	+ Pros: Can be more flexible, allowing for multiple listeners to be attached to a single event type.
	+ Cons: May incur additional overhead due to the creation of a new listener object.
* Removing an event listener:
	+ Pros: Reduces memory usage by removing a listener that is no longer needed.
	+ Cons: May require additional checks to ensure the correct listener is removed.

**Library used**

There is no specific library mentioned in the benchmark definition, but `document.getElementById` and `addEventListener` are part of the standard DOM API.

**Special JS feature or syntax**

The benchmark uses `const` declarations for variable scope, which was introduced in ECMAScript 2015 (ES6). This helps to avoid "variable hoisting" issues.

**Other considerations**

* The benchmark measures the execution time of adding and removing event listeners, which can be affected by factors like JavaScript engine optimizations, hardware performance, and network latency.
* To ensure accurate results, it's essential to run the benchmark multiple times and average the execution times.
* Users can experiment with different browsers, devices, or operating systems to see how the benchmark results vary.

**Alternatives**

If you want to create a similar benchmark, consider using:

1. A more advanced benchmarking library like Benchmark.js or Benchmarkr.
2. A testing framework like Jest or Mocha, which provides built-in support for benchmarking.
3. A custom implementation of event listener management, such as using a queue-based approach to reduce memory allocation and deallocation overhead.

Keep in mind that the specific details may vary depending on your requirements and goals.

Cost of adding and removing events (version: 0)

Comparing performance of: `Adding and removing event listeners vs Null`

Created: 2 years ago by: Guest

Go to the latest result

Adding and removing event listeners

Null

Historical Performance Data aggregated from 6 community runs

Desktop Results:

Chrome 6 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

Cost of adding and removing events (version: 0)

Comparing performance of: Adding and removing event listeners vs Null

Created: 2 years ago by: Guest

Go to the latest result

Adding and removing event listeners

Null

Historical Performance Data aggregated from 6 community runs

Desktop Results:

Chrome 6 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: `Adding and removing event listeners vs Null`