Benchmark: EventListener cost

Script Preparation code:

var audio = document.createElement("audio");

function andAOne(e){ 
  e.count = (e.count|| 0) +1; 
  e.count === 501 && e.preventDefault();
}

function andAOneAndAStop(e){ 
  e.count = (e.count|| 0) +1; 
  e.count === 501 && e.stopPropagationImmediately();
}

function andAOneAndANeverStop(e){ 
  e.count = (e.count|| 0) +1; 
  e.count === 5001 && e.stopPropagationImmediately();
}

Tests:

async 1000
for (var i = 0; i <100; i++) audio.addEventListener("ratechange",andAOne.bind({})); audio.playbackRate = 2;
async 501
for (var i = 0; i <100; i++) audio.addEventListener("ratechange",andAOneAndAStop.bind({})); audio.playbackRate = 2;
sync 1000
for (var i = 0; i <100; i++) audio.addEventListener("click",andAOne.bind({})); audio.click();
sync 501
for (var i = 0; i <100; i++) audio.addEventListener("click",andAOneAndAStop.bind({})); audio.click();
sync 1000 with a fake stopImmediatePropagation()
for (var i = 0; i <100; i++) audio.addEventListener("click",andAOneAndANeverStop.bind({})); audio.click();
async 1000 with a fake stopImmediatePropagation()
for (var i = 0; i <100; i++) audio.addEventListener("ratechange",andAOneAndANeverStop.bind({})); audio.playbackRate = 2;

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
async 1000
async 501
sync 1000
sync 501
sync 1000 with a fake stopImmediatePropagation()
async 1000 with a fake stopImmediatePropagation()

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 4 years ago)

User agent: Mozilla/5.0 (X11; Linux x86_64; rv:79.0) Gecko/20100101 Firefox/79.0

Browser/OS: Firefox 79 on Linux

View result in a separate tab

Test name	Executions per second
async 1000	10.3 Ops/sec
async 501	4.0 Ops/sec
sync 1000	24.7 Ops/sec
sync 501	8.4 Ops/sec
sync 1000 with a fake stopImmediatePropagation()	6.3 Ops/sec
async 1000 with a fake stopImmediatePropagation()	3.7 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's dive into the world of JavaScript microbenchmarks!

**Benchmark Definition JSON**

The provided benchmark definition represents a test case that measures the cost of running different event listeners on an HTML audio element. The script preparation code defines three functions:

* `andAOne(e)`: increments a counter (`e.count`) and prevents default behavior when the count reaches 501.
* `andAOneAndAStop(e)`: increments a counter (`e.count`) and stops propagation immediately when the count reaches 501.
* `andAOneAndANeverStop(e)`: increments a counter (`e.count`) and never stops propagation, but only triggers the stopImmediatePropagation method when the count reaches 5001.

**Options Compared**

The benchmark compares the following options:

* Adding an event listener with no specific behavior (default).
* Adding an event listener that prevents default behavior after a certain number of occurrences.
* Adding an event listener that immediately stops propagation after a certain number of occurrences.
* Adding an event listener that never stops propagation, but only triggers stopImmediatePropagation when the count reaches 5001.

**Pros and Cons**

Here are some pros and cons for each option:

* **Default (no specific behavior)**:
	+ Pros: simple to implement, doesn't incur any overhead.
	+ Cons: might be slower due to unnecessary event handling.
* **Prevent Default Behavior**:
	+ Pros: can prevent unwanted behavior, might be faster due to early exit.
	+ Cons: requires explicit implementation of the `preventDefault` method.
* **Stop Immediate Propagation**:
	+ Pros: allows for immediate propagation termination, might be faster due to reduced overhead.
	+ Cons: might require additional implementation or modifications to existing code.
* **Never Stop Propagation (with a twist)**:
	+ Pros: can be useful in specific scenarios where early propagation termination is not necessary.
	+ Cons: requires explicit implementation of the `stopImmediatePropagation` method, and the counter value is arbitrarily chosen.

**Library and Purpose**

The benchmark uses the `addEventListener` method, which is a part of the JavaScript API. This method allows developers to attach event listeners to HTML elements without modifying their source code.

**Special JS Feature or Syntax**

There are no specific JavaScript features or syntax mentioned in this benchmark definition that require special attention or explanation. However, it's worth noting that the use of `bind` and the creation of a closure (`andAOne.bind({})`) might be unfamiliar to some developers.

**Other Alternatives**

For those interested in exploring other alternatives, here are a few:

* Instead of using `addEventListener`, you could use event delegation or create a separate function for each event listener.
* You could also use libraries like Lodash or Ramda to simplify event handling and reduce boilerplate code.
* For web performance optimization, consider using techniques like debouncing or throttling instead of creating multiple event listeners.

Keep in mind that these alternatives might not be relevant to the specific benchmark being tested, but they can provide additional insights into optimizing JavaScript event handling.

Related benchmarks:

EventListener cost (version: 2)

what are the costs of running different event listeners?

Comparing performance of: async 1000 vs async 501 vs sync 1000 vs sync 501 vs sync 1000 with a fake stopImmediatePropagation() vs async 1000 with a fake stopImmediatePropagation()

Created: 4 years ago by: Registered User

Jump to the latest result

async 1000

async 501

sync 1000

sync 501

sync 1000 with a fake stopImmediatePropagation()

async 1000 with a fake stopImmediatePropagation()

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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