什么对性能影响更大：添加额外的事件侦听器，还是需要重复查询 DOM？

Question

我正在尝试了解在 JavaScript 中优化性能的最佳方式。为了简化，我有一些代码，其中一堆按钮每个都与一个特定元素相关联，并且我需要能够在单击按钮时同时更改按钮及其关联的元素。

有人告诉我最好尽可能将事件处理程序与事件委托结合起来。我还被告知是否可以避免针对同一元素反复查询 DOM，最好只查询一次并将其存储以备后用。但在这种情况下，似乎我需要做一个或另一个，所以我想知道哪个更昂贵？目前我有以下代码运行一次来设置：

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

显然这会为每个按钮创建一个单独的侦听器，所以我想我可以这样重写它：

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"
   }
});

但现在每次单击按钮时我都必须再次查询关联的“区域”元素，这值得权衡吗？答案是否会根据我拥有的按钮数量或它们被点击的频率而改变？是否有比我的任何一个解决方案都更优化的第三个答案？如果这是一个非常明显和愚蠢的问题，我深表歉意，但我一直在谷歌搜索和查看其他 Stack Overflow 问题，但真的找不到任何答案。

Answer 1

which is more costly?

正如您已经注意到的，这是一种权衡。您需要比较的费用分别是

初始化花费的执行时间
每个点击处理程序的执行时间
保持状态所需的内存

对于在正常网络流程中点击的几个按钮（而不是 APM 测试工具），这真的无关紧要。

什么对性能影响更大：添加额外的事件侦听器，还是需要重复查询 DOM？

What has a greater performance impact: adding an extra event listener, or needing to query the DOM repeatedly?

javascript

performance

dom-events

coding-efficiency