Performance Optimization Techniques

What performance issue does this event handling pattern cause?

document.querySelectorAll('.button').forEach(button => {
  button.addEventListener('click', function() {
    console.log('Button clicked:', this.textContent);
  });
});

Memory leaks from not removing event listeners
Excessive CPU usage from anonymous functions
Inefficient event delegation
This code pattern causes inefficient event handling by attaching individual event listeners to each button element instead of using event delegation. With many elements, this approach can lead to significant memory overhead and initialization time as each element gets its own function and listener. Event delegation is a more efficient pattern where a single event listener is attached to a parent element, then handles events from all child elements using event.target. Example: document.querySelector('.container').addEventListener('click', function(event) { if (event.target.matches('.button')) { console.log('Button clicked:', event.target.textContent); } }); This approach uses less memory, initializes faster, and automatically handles dynamically added elements without requiring additional listeners.
Blocking the main thread

Next Question (17/40)