WeakRef 和 FinalizationRegistry 是 JavaScript 内存管理 API，不能在 HTML 中直接使用，因 HTML 是声明式语言，不支持弱引用语义；WeakRef 需 JS 显式操作，deref() 可能返回 undefined，而 HTML 属性无法表达此动态状态。
WeakRef 和 FinalizationRegistry 本身不是 HTML 特性，而是 JavaScript（ES2021+）的内存管理 API；它们不能直接在 HTML 标签或属性中使用，必须通过 script 脚本操作 DOM 节点并构建缓存逻辑。
为什么不能在 HTML 中直接用 WeakRef？
HTML 是声明式标记语言，不执行引用语义或垃圾回收逻辑。WeakRef 是运行时对象，需由 JS 显式创建、持有和检查：deref() 返回值可能为 undefined，而 HTML 属性（如 data-ref）无法表达这种动态可空状态。试图把 WeakRef 实例塞进 dataset 或 innerHTML，只会调用 .toString() 得到 [object WeakRef]，完全失去弱引用能力。
DOM 缓存泄漏的真实场景和错误写法
典型泄漏模式是：用普通 Map 或对象以 DOM 节点为 key 存储关联数据，节点被 remove() 后，key 仍强引用该节点，GC 无法回收。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- ❌ 错误示例（强引用锁死 DOM）：
const cache = new Map(); cache.set(document.getElementById('item'), { metadata: 'xxx' }); // 节点被 remove() 后仍驻留内存 - ✅ 正确方向：用
WeakMap替代 —— 它的 key 是弱引用，节点无其他强引用时自动从WeakMap中消失，无需FinalizationRegistry；WeakRef+FinalizationRegistry主要用于「value 是大对象、且 key 不是 DOM」的场景（比如缓存计算结果，key 是字符串 ID，value 是曾绑定过该 ID 的 DOM 节点）。
什么时候才需要 WeakRef + FinalizationRegistry 组合？
仅当你的缓存结构要求「key 是不可弱化的标识（如字符串、数字），但 value 是可能被移除的 DOM 节点或其他大对象」——例如：
立即学习“前端免费学习笔记（深入）”；
- 你按商品 ID 缓存了其对应的
<img>元素，用户切换页面后该<img>被销毁，但缓存里还存着它； - 你用字符串 key 缓存了某个组件根节点的渲染快照（
DocumentFragment），该快照后续不再被任何地方引用。
这时才需手动包装：
const cache = new Map(); // key: string, value: WeakRef<Node>
const registry = new FinalizationRegistry(key => cache.delete(key));
function setCache(key, node) {
cache.set(key, new WeakRef(node));
registry.register(node, key); // 注意：注册的是 node，不是 WeakRef
}
function getCache(key) {
const ref = cache.get(key);
return ref?.deref() ?? null; // deref 可能返回 null
}
容易忽略的关键细节
FinalizationRegistry 回调**不保证及时执行**，甚至可能永不触发（如页面关闭前 GC 未运行）；它只是“尽力而为”的清理辅助，绝不能替代显式清理逻辑。真实项目中，你应该：
- 优先用
WeakMap（key 是 DOM，value 是任意数据）—— 更简单、更可靠； - 若必须用字符串 key，就在 DOM 节点移除时同步调用
cache.delete(key)（例如监听MutationObserver或在组件卸载钩子中清理）； - 把
FinalizationRegistry当作兜底层，而非主逻辑——它帮你 catch 那些漏掉的 case，但别依赖它保命。
