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 就永远等不到回收，缓存也就永远不会清理。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
