如何用HTML的WeakRef创建弱引用来避免缓存导致的内存泄漏

WeakRef 是 JavaScript 的原生弱引用 API，需搭配 FinalizationRegistry 使用才能实现安全缓存；它不等同于 Python 的 weakref 模块，且仅限现代浏览器支持，Node.js 尚未原生实现。

WeakRef 是什么，它和 Python 的 weakref 不是一回事

HTML 中的 WeakRef 是 JavaScript 的原生 API，不是 Python 的 weakref 模块。它只在现代浏览器（Chrome 74+、Firefox 79+、Safari 16.4+）中可用，Node.js 目前不支持（v20.12 仍无原生实现）。它的作用很明确：让你持有一个对象的弱引用，不阻止 GC 回收该对象。但你不能直接用 WeakRef 当缓存——它本身不提供自动清理机制，必须搭配 FinalizationRegistry 才能安全落地。

为什么单独用 WeakRef.set() 会积累“空引用”

常见错误是把 WeakRef 当成缓存容器直接塞进 Map：

const cache = new Map();function getOrCompute(key) {  const ref = cache.get(key);  const value = ref?.deref(); // 可能是 undefined  if (value !== undefined) return value;  const newValue = expensiveCompute(key);  cache.set(key, new WeakRef(newValue)); // ❌ 问题在这里  return newValue;}

这个写法的问题在于：cache 本身是强引用容器，WeakRef 实例被长期持有，而它所指向的对象可能早已被 GC 回收。下次 deref() 返回 undefined，但 cache 里还存着这个“已失效”的 WeakRef，条目越积越多，查找变慢，内存不释放。

• WeakRef 实例本身是强引用，必须手动清理
• deref() 不触发 GC，只读取当前状态
• 没有回调机制告知“对象刚被回收”，仅靠轮询 deref() 效率低且不可靠

必须搭配 FinalizationRegistry 才算完整方案

FinalizationRegistry 是唯一能在对象**真正被 GC 回收后立即触发清理逻辑**的机制。它和 WeakRef 是配套使用的：

立即学习“前端免费学习笔记（深入）”；

const cache = new Map();const registry = new FinalizationRegistry((key) => {  cache.delete(key); // ✅ 对象一回收，立刻删缓存键});function getOrCompute(key) {  const ref = cache.get(key);  const value = ref?.deref();  if (value !== undefined) return value;  const newValue = expensiveCompute(key);  const refObj = new WeakRef(newValue);  cache.set(key, refObj);  registry.register(newValue, key, refObj); // ✅ 注册时传入 key 作为清理依据  return newValue;}

关键约束必须遵守：

• 注册键（这里是 key）必须是 string、symbol 或其他可严格比较的原始值，不能是普通对象
• registry.register() 必须在 new WeakRef() 后**立即调用**，且第三个参数要传入该 WeakRef 实例（用于内部关联）
• 清理回调函数里**不能访问已被回收的对象**，只能做副作用，比如删 Map 条目

WeakRef 缓存不适合频繁读写的场景

WeakRef + FinalizationRegistry 方案有明显适用边界：

• 适合生命周期长、计算开销大、但访问频率不高的对象（如大型配置、解析后的模板、资源句柄）
• 不适合高频读写缓存（如每秒数百次），因为 deref() 是运行时检查，性能不如直接强引用；FinalizationRegistry 的回调也不是实时的，存在延迟
• 无法替代 LRU 等主动淘汰策略，它只响应 GC，不控制缓存大小
• 调试困难：GC 时间不可控，FinalizationRegistry 回调无法在 DevTools 中断点，只能靠日志或内存快照验证

真正容易被忽略的是：你得确认目标对象确实会被 GC —— 如果它意外被闭包、事件监听器、全局变量或 DOM 引用持有着，WeakRef 就永远等不到回收，缓存也就永远不会清理。