requestIdleCallback分帧注入更稳，因它在浏览器空闲帧执行、不抢占交互，每帧处理200–250个节点可防OOM；Android 7以下需fallback为setTimeout(, 16)并节流，且须用HTML字符串数组而非Element节点注入。
requestIdleCallback分帧注入比setTimeout更稳
一次性写入5000个<div class="tag-inline">在低内存安卓设备上大概率触发OOM或主线程卡死，不是JS慢，是layout阶段内存撑爆。用setTimeout调度容易堆积任务、节流失效；requestIdleCallback则明确交由浏览器空闲帧执行，不抢占用户交互。
- 每帧最多处理200–250个节点（Android 8–13实测阈值）
- 传入
container.append()的必须是HTML字符串数组，不是已创建的Element节点——后者会提前触发样式计算和布局 - Android 7及以下需fallback：
setTimeout(() => ..., 16)，不能用0 - 递归调用时注意尾调用优化，避免栈溢出：用
requestIdleCallback(() => injectTags(tags, nextIndex))而非直接injectTags(...)
DOM节点复用池比createElement更省内存
高频动态刷新场景下，反复document.createElement('div')再appendChild会快速耗尽堆空间，尤其低端机GC跟不上创建节奏。节点复用池把创建/销毁成本转为“清空+回收”，实测1000行表格内存占用降低62%。
-
recover()必须清空textContent和innerHTML，否则残留内容会在下次create()后意外显示 - 事件监听器必须在取出后绑定、回收前解绑，否则监听器滞留导致内存泄漏
- 预热池子：首次使用前先
recover(create())5次，避免冷启动延迟 - 避免在
createFn里写addEventListener——绑定逻辑应外置
display: inline标签堆叠是隐形崩溃源
用<span>或<a>渲染标签云、筛选项等列表，表面轻量，实则让浏览器在layout阶段为每个元素维护文本流上下文，几千个就直接白屏。这不是CSS问题，是渲染引擎底层资源耗尽。
- 统一替换为
<div class="tag-inline">，CSS设display: inline-block; vertical-align: top; - 禁用
float、width，避免触发BFC增加布局开销 -
vertical-align必须显式设置，否则混排图标或数字时基线错乱 - 首屏DOM节点数压到≤500，总节点数不超过2000——CI中用Puppeteer断言：
document.querySelectorAll('*').length
closest失效不是API问题，是广告脚本篡改DOM结构
element.closest('.form-container')突然返回null，但inspect能看到目标class还在？这不是API失效，是第三方广告脚本用appendChild或replaceChild在中间插入了<div class="ad-wrapper">，物理父子关系断裂。
立即学习“前端免费学习笔记（深入）”；
- 别等
closest失败才补救，用MutationObserver监听{ childList: true, subtree: true }，捕获addedNodes里含ad-/banner-类名的新wrapper - 缓存路径用CSS选择器数组：
['#app', '.checkout', '.form-container']，比DOM引用更稳定 - fallback查找必须限定范围：
document.getElementById('app')?.querySelector('.form-container')，避免命中广告生成的同名节点 - 关键操作加双重校验：
el.matches(selector) || (el.parentElement && el.parentElement.closest(selector))
