Estoy tratando de entender la mejor manera de optimizar el rendimiento en JavaScript. Para simplificar, tengo un código en el que un montón de botones están asociados con un elemento específico, y necesito poder realizar cambios tanto en el botón como en su elemento asociado cada vez que se hace clic en un botón.

Me han dicho que es mejor consolidar los controladores de eventos con la delegación de eventos donde pueda. También me dijeron que si puedo evitar consultar el DOM una y otra vez por el mismo elemento, es mejor hacerlo solo una vez y guardarlo para más adelante. Pero en este caso, parece que necesito hacer uno u otro, así que me pregunto cuál es más costoso. Actualmente tengo el siguiente código que se ejecuta una vez para configurar las cosas:

 buttons.forEach((button) => { const area = document.querySelector(`#${button.getAttribute('aria-controls')}`); button.addEventListener('click', (e) => { // do some things with "area" and "button" }); });

Obviamente, esto crea un oyente individual para cada botón, así que pensé que podría reescribirlo así:

 document.addEventListener('click', (e) => { if(e.target.classList.contains("button-class")) { const area = document.querySelector(`#${e.target.getAttribute('aria-controls')}`); // do some things with "area" and "button" } });

Pero, ¿vale la pena el intercambio de que ahora, cada vez que se hace clic en un botón, tengo que consultar nuevamente el elemento de "área" asociado? ¿Cambia la respuesta dependiendo de cuántos botones tengo o con qué frecuencia es probable que se haga clic en ellos? ¿Hay alguna tercera respuesta que sea más óptima que cualquiera de mis soluciones? Disculpas si esta es una pregunta realmente obvia y estúpida, pero he estado buscando en Google y mirando otras preguntas de Stack Overflow y realmente no puedo encontrar nada para responder esto.