16GB以上内存设备可直接使用支持全量驻留+索引加速的HTML检索工具，关键在于选用能承载整棵DOM树并预建倒排索引的方案，结合querySelectorAll+:has()、TreeWalker及Map缓存实现高效语义检索与内存可控驻留。
16GB以上内存设备可直接使用支持全量驻留+索引加速的HTML检索工具，无需流式降级或手动切片——关键在于选对能吃下整棵DOM树、并预建倒排索引的函数方案。
用 document.querySelectorAll 配合 :has() 实现 DOM 树内快速语义检索
大内存设备上，document.querySelectorAll 不再是“慢操作”的代名词。配合原生 CSS 选择器扩展（Chrome 111+、Safari 16.4+、Firefox 120+），可直接在完整 DOM 树中做条件穿透查询，避免手写递归遍历。
- 查所有含
<img>且父级有class="card"的<article>：document.querySelectorAll('article:has(.card img)') - 查文本包含“错误”且紧邻
<button>的<span>：document.querySelectorAll('span:has(+ button):has(innerText*="错误")')（需 polyfill 支持 innerText*） - 性能前提：确保 DOM 已完全解析（
DOMContentLoaded后执行），且不频繁调用（因每次触发 selector 引擎全树匹配） - ⚠️ 注意：
:has()在部分旧版 Safari 中仍为实验性特性，生产环境需加try/catch回退到querySelectorAll('span').filter(...)
用 TreeWalker + NodeFilter 快速过滤海量节点而不爆栈
TreeWalker 是浏览器原生的内存友好型遍历接口，它不生成中间数组、不递归调用、不保留已访问节点引用——在 10 万+ 节点的 HTML 文档中，比 getElementsByTagName('*').forEach 更稳、更快、更省堆。
- 只取所有带
data-id的<div>元素：const walker = document.createTreeWalker(document.body, NodeFilter.SHOW_ELEMENT, { acceptNode: node => node.tagName === 'DIV' && node.hasAttribute('data-id') ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_REJECT }); - 配合
walker.nextNode()按需拉取，适合与for...of或Array.from({ length: 100 }, () => walker.nextNode())结合做分页加载 - ⚠️ 坑点：若传入
NodeFilter.SHOW_ALL，且 filter 函数返回FILTER_SKIP，某些旧版 Edge 会跳过子树；应始终显式指定SHOW_ELEMENT或SHOW_TEXT
用 Map 缓存 selector → NodeList 映射实现毫秒级重复检索
当同一选择器在单页应用中被高频复用（如仪表盘每秒刷新数据后重查状态节点），把 querySelectorAll 结果缓存在 Map 中，比反复解析选择器快 3–8 倍，且内存开销可控——NodeList 是活引用，不拷贝 DOM 节点本身。
立即学习“前端免费学习笔记（深入）”；
- 初始化缓存：
const selectorCache = new Map(); - 封装安全查询：
function cachedQuery(sel) { if (!selectorCache.has(sel)) { selectorCache.set(sel, document.querySelectorAll(sel)); } return selectorCache.get(sel); } - 清理时机：仅在 DOM 大幅变更（如
innerHTML = newHTML）后调用selectorCache.clear()；不要在每次appendChild后清空 - ⚠️ 关键限制：缓存的 NodeList 会随 DOM 变动自动更新（它是实时视图），但若节点被移出文档，其 length 不变，访问时返回
null——需配合node.isConnected过滤
真正容易被忽略的是：大内存 ≠ 可放任 DOM 膨胀。即使有 32GB RAM，一个未清理的 cachedQuery 映射若长期持有已 detach 的节点，仍会拖慢 GC。驻留的前提是“可控驻留”，不是“无脑驻留”。
