Benchmark: event delegation

HTML Preparation code:

<div id="container"><div class="one"></div>
<div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div><div class="many"></div>

Tests:

one
$('.one').on('click', function() {});
many
$('.many').on('click', function() {});
parent bound
$('#container').on('click', '.many', function() {});

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
one
many
parent bound

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated 27 days ago):

LLMs can make mistakes. Check important info.

**Benchmark Overview**

The provided benchmark, "event delegation", measures the performance of event handling in JavaScript. It consists of three test cases:

1. `one`: Attaches an event listener to a single element (`$('.one')`) and does nothing when triggered.
2. `many`: Attaches an event listener to multiple elements (`$('.many)`) and does nothing when triggered.
3. `parent bound`: Attaches an event listener to the parent element of multiple elements (`$('#container').on('click', '.many')`) and does nothing when triggered.

**Options Compared**

The benchmark compares three different approaches:

1. **Direct binding**: Each element is directly bound to an event listener (e.g., `$('.one').on('click', function() {})`).
2. **Event delegation**: An event listener is attached to a parent element, and the target element is specified as a CSS selector (e.g., `$('#container').on('click', '.many')`).

**Pros and Cons**

**Direct Binding**

* Pros:
	+ More intuitive and easy to understand for developers.
	+ Does not require additional DOM traversal or manipulation.
* Cons:
	+ Can lead to slower performance due to the need to traverse the DOM tree for every event dispatch.
	+ May result in memory leaks if event listeners are not properly cleaned up.

**Event Delegation**

* Pros:
	+ Can significantly improve performance by reducing the number of DOM traversals required for event dispatch.
	+ Allows for more efficient handling of events, as only relevant elements need to be checked.
* Cons:
	+ May require additional setup and configuration to ensure correct element selection.
	+ Can lead to more complex code if not implemented correctly.

**Benchmark Results**

The latest benchmark results show that:

1. `one` performs the best with a high execution frequency (260627.796875 executions per second) due to its simple event handling logic.
2. `parent bound` performs the worst, but still outperforms direct binding by a significant margin (4362.38623046875 executions per second).
3. `many` falls in between, with a moderate execution frequency.

**Conclusion**

The benchmark highlights the benefits of event delegation over direct binding for event handling in JavaScript. By using event delegation, developers can significantly improve performance and reduce DOM traversals, leading to faster and more efficient code execution. However, proper setup and configuration are crucial to ensure correct element selection and optimal performance.

Latest run results:

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

User agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/65.0.3325.146 Safari/537.36

Browser/OS: Chrome 65 on Linux

View result in a separate tab

Test name	Executions per second
one	260627.8 Ops/sec
many	4362.4 Ops/sec
parent bound	260563.0 Ops/sec

Related benchmarks:

event delegation (version: 0)

Comparing performance of: one vs many vs parent bound

Created: 6 years ago by: Guest

Jump to the latest result

one

many

parent bound

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated 27 days ago):