document.querySelectorAll可用但需谨慎：应静态调用、用具体选择器、避免实时集合误用，否则比getElementById更慢；循环内反复调用会重复解析DOM，属性选择器无索引需全扫描，限定容器和组合选择器可提升性能。
直接结论：用 document.querySelectorAll 没问题，但必须配合静态遍历、具体选择器和避免实时集合误用——否则它反而比 getElementById 还慢。
为什么 querySelectorAll 在循环里反复调用是性能杀手
浏览器每次执行 document.querySelectorAll 都要从根节点开始匹配整个 CSS 选择器，解析 DOM 树、计算样式、过滤节点。在 for 循环里写 for (let i = 0; i ，等于做了 10 次完整树遍历。
- 实际场景常见于：列表渲染后批量绑事件、表单校验时反复查同类输入框、动画帧中动态查元素
- 替代做法：只调用一次，存到变量里再遍历
- 注意：返回的是静态
NodeList，后续 DOM 插入/删除不影响它——这点常被误认为“失效”，其实是设计如此
querySelectorAll 返回的 NodeList 怎么安全遍历
它不是 Array，但现代浏览器（Chrome 51+、Firefox 50+、Edge 17+、Safari 10.1+）支持直接 forEach 和 for...of；IE11 及更旧环境需转数组或用传统 for。
- ✅ 推荐（简洁 + 兼容主流）：
document.querySelectorAll('button[data-action]').forEach(btn => btn.addEventListener('click', handler)) - ✅ 稳定（所有环境）：
const buttons = document.querySelectorAll('button'); for (let i = 0; i - ❌ 危险：
[...document.querySelectorAll('li')].map(...)—— 展开操作本身有开销，纯遍历没必要 - ⚠️ 注意：
NodeList不支持map/filter等数组方法，直接调会报TypeError
选择器写得太宽泛，querySelectorAll 就变拖累
性能瓶颈往往不在 JS 层，而在选择器匹配阶段。浏览器对 .class 和 #id 有优化，但对 *、:not()、深层嵌套（如 div > ul > li > a）几乎无缓存。
- ❌ 避免：
document.querySelectorAll('*')（遍历全部节点）、document.querySelectorAll('[data-id]')（属性选择器无索引，全扫描） - ✅ 优先：
document.querySelectorAll('button.save')（标签 + 类组合，浏览器可快速过滤） - ✅ 更优：
container.querySelectorAll('input[type="text"]')（限定父容器，缩小搜索范围） - ? 小技巧：用
data-属性时，尽量加前缀类名，比如data-field-type="email"配合.form-input[data-field-type]，比单独[data-field-type]快得多
别把 querySelectorAll 当成万能补丁
它解决的是「找一批元素」，不是「动态响应结构变化」。如果目标元素是异步插入、或依赖用户交互频繁增删，querySelectorAll 静态快照的特性反而会导致漏处理。
- 需要响应新增节点？用
MutationObserver监听childList - 只需处理点击目标？用事件委托 +
event.target.closest('.item')，比预先查一堆再绑事件更轻量 - 仅查唯一元素？
document.getElementById仍最快，且语义明确；querySelector('#id')多一层解析，没必要 - ⚠️ 容易忽略：
querySelectorAll抛错不明显——选择器语法错误时抛SyntaxError，但拼写错误（如.btnn）只是返回空列表，逻辑静默失败
