<!--your preparation HTML code goes here-->const buttons = Array.from({length: 10000}, () => document.createElement('button'))const events = new Map()const addListener = (event, target, listener) => { let targets = events.get(event) if (targets === undefined) { targets = new Map() events.set(event, targets) } let listeners = targets.get(target) if (listeners === undefined) { listeners = new Set() targets.set(target, listeners) } listeners.add(listener)}buttons.forEach((target) => { addListener('click', target, console.log) addListener('focus', target, console.log) addListener('blur', target, console.log)})buttons.forEach((button) => { button.addEventListener('click', console.log) button.addEventListener('focus', console.log) button.addEventListener('blur', console.log)})--enable-precise-memory-info flag.
| Test case name | Result |
|---|---|
| Delegation | |
| Targetting |
| Test name | Executions per second |
|---|---|
| Delegation | 2138.0 Ops/sec |
| Targetting | 350.9 Ops/sec |
In this benchmark, we are evaluating the performance of two different approaches to event handling in JavaScript: Event Delegation and Direct Targetting. Both methods are commonly used for associating event listeners with HTML elements, but they have different implications for performance and usability.
Event Delegation: This method involves attaching a single event listener to a parent element (or a collection of elements) that listens for events occurring on child elements. In the test, the event listeners for "click," "focus," and "blur" are added to each button through a centralized addListener function that uses a Map to manage event listeners grouped by both event type and target element.
Direct Targetting: In contrast, this method involves attaching event listeners directly to each individual button element. In the test, the event listeners for "click," "focus," and "blur" are directly added to each button, meaning each button maintains its own independent set of listeners.
Pros:
Cons:
Pros:
Cons:
From the provided benchmark results, we see the following performance metrics:
Delegation:
Targetting:
When choosing between event delegation and direct targetting, software engineers should consider:
Passive Event Listeners: For scroll and touch event handling, passive listeners can improve performance by allowing the browser to perform optimally with scrolling.
Throttling/Debouncing: For performance-critical applications (like resizing or scrolling events), using techniques like throttling or debouncing can help manage how often functions are executed in response to events.
Frameworks/Libraries: Libraries like React have built-in event handling systems that optimize these concerns, abstracting away some of the complexity of choosing between delegation and direct listeners.
In summary, selecting between event delegation and direct targetting largely depends on the specific use case, performance needs, and complexity of the application. The benchmark results clearly show that event delegation is more efficient for handling a large number of elements in this particular scenario.
