dom查询必须缓存，因每次调用如getelementbyid或queryselector都会重新遍历dom或解析选择器，高频调用导致卡顿；应提前在顶层、挂载钩子或初始化时获取并存为变量，避免在循环、事件回调或渲染中重复查询。
DOM 查询必须缓存，不是“能缓存”，而是“不缓存就出问题”
每次调用 document.getElementById、document.querySelector 或 document.querySelectorAll，浏览器都要重新遍历 DOM 树或执行选择器匹配逻辑。哪怕目标元素就在 下第一层，开销也不为零；在循环、事件回调或高频渲染中重复查同一元素，卡顿会立刻显现。
缓存方式只有一种靠谱：变量引用 + 提前获取
别信“引擎自动缓存 ID”或“现代浏览器优化了 querySelector”——这些说法在真实场景中不可靠。ID 查询虽有哈希索引加速，但 querySelector 每次都重新解析选择器字符串；getElementsByClassName 返回的 HTMLCollection 是实时集合，访问 .length 或下标都会触发重查。
- 把查询语句放在模块顶层、组件挂载钩子（如
useEffect、onMounted）或初始化函数里，只执行一次 - 命名要明确，比如
const submitBtn = document.querySelector('#submit-btn')，而不是const el = ... - 如果元素可能不存在，加空值判断：
if (!submitBtn) return，避免后续.addEventListener报错 - 查多个同类节点？用
document.querySelectorAll('.item')+Array.from()转成静态数组，别用getElementsByClassName
哪些地方最容易漏掉缓存
缓存失效往往不出现在“会不会”，而出现在“什么时候查”和“查几次”。以下场景几乎 100% 出现重复查询：
- React/Vue 组件每次
render都调document.getElementById—— 应该移到useEffect或onMounted中 - 滚动监听里写
document.querySelector('.header')—— 滚动触发几十次，就查几十次 - 表单验证函数里反复查
input元素，且没提取到闭包外 - 用
document.getElementsByTagName('button')[0]替代document.querySelector('button[type="submit"]')—— 前者是实时集合，后者是静态 NodeList，但两者都不该在热路径里反复调
模板引擎渲染后，DOM 缓存更要手动接管
服务端渲染或流式 HTML 插入（如 innerHTML、insertAdjacentHTML）后，新节点不会自动被缓存。你不能假设“刚插入的按钮我马上就能用变量访问”——它得你亲手查一次、存一次。
- 插入后立即缓存：
container.insertAdjacentHTML('beforeend', '<button id="dynamic-btn">Go</button>'); const dynamicBtn = document.getElementById('dynamic-btn'); - 避免在插入后又用
querySelector扫全页找这个按钮——它 ID 唯一，直接getElementById最快 - 如果插入的是列表项（如 50 个
.list-item），用querySelectorAll查一次，存为数组，后续遍历全用这个数组，别在循环里反复查
最常被忽略的一点：缓存不是“性能优化技巧”，而是 DOM 操作的基本前提。一旦你写了两次 document.querySelector 查同一个元素，就已经在为后续的卡顿、竞态、维护困难埋雷。动手前先想清楚——这个元素我是不是真需要每次都重新找？
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
