添加额外事件监听器与重复查询DOM，哪个对JS性能影响更大？

两种方案的性能开销对比 #

ID选择器的查询开销本身极低，浏览器对document.querySelector('#xxx')做了专门的哈希表索引优化，单次查询耗时基本在微秒级，几乎可以忽略。而单个事件监听器的内存开销也非常小，常规场景下（按钮数量少于1000个）两种方案的性能差异用户完全感知不到，两者的核心差异在于开销的发生阶段：

• 逐个绑定监听器的方案：开销集中在初始化阶段，按钮数量越多，初始化时注册监听器、存储闭包引用的耗时和内存占用越高，动态新增按钮时还需要重复执行绑定逻辑
• 事件委托的方案：开销集中在点击触发阶段，每次点击都要经过事件冒泡到document、匹配目标元素、查询关联area三个步骤，点击频率越高、页面可点击元素越多，累计的触发阶段开销越高

取舍判断标准 #

你可以根据自己的业务场景直接做选择：

1. 按钮为静态存在、数量少于100个、点击频率极低：两种方案没有本质差异，任选即可
2. 按钮数量超过1000个、或为动态生成（比如列表翻页、筛选新增按钮）：优先选择事件委托，避免重复绑定监听器的冗余开销
3. 按钮为静态存在、点击频率极高（比如高频操作的工具栏按钮）：优先选择逐个绑定方案，缓存DOM元素的收益更高

兼顾两者优势的第三种方案 #

你不需要在两个方案里二选一，完全可以结合两者的优势，既保留事件委托的低初始化开销，又避免重复查询DOM的损耗：

// 初始化阶段统一缓存按钮和关联area的映射
const buttonAreaMap = new Map();
document.querySelectorAll('.button-class').forEach(button => {
  const area = document.querySelector(`#${button.getAttribute('aria-controls')}`);
  buttonAreaMap.set(button, area);
});

// 全局仅绑定一个事件监听器
document.addEventListener('click', (e) => {
  // 用closest匹配避免按钮内部嵌套子元素时的匹配失效问题
  const button = e.target.closest('.button-class');
  if (!button) return;
  // 直接从缓存读取，不需要重复查询DOM
  const area = buttonAreaMap.get(button);
  // 执行业务逻辑
});

如果你的场景里按钮数量极多，但大部分按钮用户不会点击，还可以改成懒缓存的模式进一步降低初始化开销：

const buttonAreaMap = new Map();
document.addEventListener('click', (e) => {
  const button = e.target.closest('.button-class');
  if (!button) return;
  let area = buttonAreaMap.get(button);
  // 仅在第一次点击时查询DOM，后续复用缓存
  if (!area) {
    area = document.querySelector(`#${button.getAttribute('aria-controls')}`);
    buttonAreaMap.set(button, area);
  }
  // 执行业务逻辑
});

内容的提问来源于stack exchange，提问作者jamescodes