频繁 DOM 查询不直接掉帧但会间接引发强制同步布局等开销，应缓存稳定节点、分离读写操作、减少高频属性访问，并用状态驱动或事件委托替代冗余查询。
频繁 DOM 查询本身不直接导致掉帧，但会间接引发强制同步布局、重复解析或跨模块通信开销，尤其在 requestAnimationFrame、滚动监听或动画循环中反复执行时，极易拖慢主线程，使 FPS 掉出 60 帧阈值。
缓存稳定节点，避免重复查询
对初始化后基本不变的全局节点（如 document.body、document.head、带 ID 的根容器），应在脚本启动时一次性获取并赋值给常量变量。浏览器不会为这些属性做内部缓存，每次访问都需跨 JS/DOM 模块通信。
-
✅ 推荐写法：
const APP_ROOT = document.getElementById('app');—— ID 查询走哈希表，最快；比querySelector('#app')快 2–5 倍（Chrome 128 实测） -
⚠️ 避免写法：在
scroll回调里反复调用document.querySelector('.header')或document.body.clientWidth -
注意边界：不要缓存
document.activeElement或document.visibilityState，它们是实时快照，缓存即失效
分离读写操作，防止布局抖动
当修改样式后立即读取几何属性（如 offsetTop、clientWidth、getComputedStyle），浏览器会强制刷新渲染队列，触发同步重排——这就是“布局抖动”。一次抖动可能耗时 3ms 以上，直接造成掉帧。
-
❌ 危险模式：
el.style.width = '200px'; console.log(el.offsetWidth);→ 触发两次重排 -
✅ 安全做法：把所有读操作集中到一起，所有写操作集中到一起；或统一延迟到下一帧再读：
requestAnimationFrame(() => console.log(el.offsetTop)); -
小技巧：需要多次读尺寸时，先用
getBoundingClientRect()一次性拿到全部值，而非反复调用单个属性
减少高频场景下的属性访问次数
某些看似轻量的全局属性，在特定浏览器中实际开销不小。例如 document.title 在 Safari 中频繁读写曾引发主线程阻塞（2025 年实测）；document.scrollingElement 在 IE 中需降级判断，也不宜每帧都查。
-
可安全缓存的属性：
document.body、document.documentElement、document.scrollingElement || document.body -
建议封装成工具函数：比如
getScrollTarget()只在首次调用时检测并缓存，后续返回同一引用 -
滚动监听优化：用
passive: true注册事件，并结合防抖或IntersectionObserver替代对scrollTop的轮询读取
用更轻量的方式替代部分 DOM 查询
不是所有需求都必须查 DOM。能用 CSS 变量、dataset 缓存、事件委托或状态管理绕过的，就别碰查询 API。
-
状态驱动代替查询：菜单是否展开，用布尔变量
isMenuOpen控制，而非每次去查menu.classList.contains('open') -
事件委托代替多次绑定：父容器监听点击，通过
e.target判断来源，避免为每个子项单独querySelector+addEventListener -
CSS 自定义属性辅助：用
getComputedStyle(root).getPropertyValue('--theme-color')替代查多个元素的 style，一次读取复用多处
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
