如何避免`querySelector`频繁查询导致的性能下降？

为了避免`querySelector`频繁查询造成的性能下降，你可以考虑以下几个策略：

1. **缓存查询结果**：如果你经常需要获取相同的元素，可以在查询后将结果存储在一个变量中，下次需要就直接从缓存中取，而不是每次都重新查询。

const element = document.querySelector('#myElement');

2. **批量查询**：如果你需要获取多个同类型的元素，使用`querySelectorAll`代替单个查询，因为它一次返回所有匹配的元素，减少了单独多次查询的次数。

const elements = document.querySelectorAll('.myClass');

3. **事件委托**：在处理动态添加或移除的元素时，可以将事件处理器绑定到它们的共同祖先元素上，利用冒泡机制，让事件触发时自动作用于新添加的元素。

document.getElementById('parent').addEventListener('click', handleEvent);
function handleEvent(event) {
  if (event.target.matches('.child')) { ... }
}

4. **仅在必要时查询**：避免无谓的DOM操作，只在确实需要显示或交互的时候再进行查询。

5. **使用性能分析工具**：使用像是Chrome DevTools这样的工具监控和识别性能瓶颈，以便找出真正造成性能问题的部分并针对性地优化。

通过这些技巧，你可以有效降低`querySelector`频繁查询对页面性能的影响。