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();
}
for (var i = 0; i <100; i++)
audio.addEventListener("ratechange",andAOne.bind({}));
audio.playbackRate = 2;
for (var i = 0; i <100; i++)
audio.addEventListener("ratechange",andAOneAndAStop.bind({}));
audio.playbackRate = 2;
for (var i = 0; i <100; i++)
audio.addEventListener("click",andAOne.bind({}));
audio.click();
for (var i = 0; i <100; i++)
audio.addEventListener("click",andAOneAndAStop.bind({}));
audio.click();
for (var i = 0; i <100; i++)
audio.addEventListener("click",andAOneAndANeverStop.bind({}));
audio.click();
for (var i = 0; i <100; i++)
audio.addEventListener("ratechange",andAOneAndANeverStop.bind({}));
audio.playbackRate = 2;
--enable-precise-memory-info
flag.
Test case name | Result |
---|---|
async 1000 | |
async 501 | |
sync 1000 | |
sync 501 | |
sync 1000 with a fake stopImmediatePropagation() | |
async 1000 with a fake stopImmediatePropagation() |
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 |
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:
Pros and Cons
Here are some pros and cons for each option:
preventDefault
method.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:
addEventListener
, you could use event delegation or create a separate function for each event listener.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.