html实现WeakRef弱引用缓存_html WeakRef FinalizationRegistry弱引用【实战】-html教程-PHP中文网

html本身不支持weakref，它是javascript的es2021特性，仅在js运行时生效；写在html标签属性中仅为字符串，无任何语义或行为影响，弱引用逻辑必须在js代码中显式实现。

html实现weakref弱引用缓存_html weakref finalizationregistry弱引用【实战】

HTML 本身不支持 WeakRef，也不存在“HTML 实现 WeakRef 缓存”这回事。WeakRef 是 JavaScript 的原生 API（ES2021），只在 JS 运行时生效；你在 <script></script> 里用它才有效，写在 HTML 标签属性（如 class="weakref"、data-ref="xxx"）里纯属字符串，浏览器解析器完全无视，更不会触发任何弱引用行为。

WeakRef 必须在 JS 中显式创建和使用

WeakRef 的作用是让 JS 代码持有对象但不阻止 GC 回收——这个逻辑只能由 JS 引擎执行，HTML 解析器连 WeakRef 这个词都不认识。常见误用包括：

把 new WeakRef(el) 存进全局变量或闭包，却还在事件监听器里直接用 el —— 闭包捕获的 el 是强引用，WeakRef 完全没用
用 WeakRef 包裹 HTMLImageElement 后，没处理 onerror：加载失败的图片不会被 GC，WeakRef 永远不“失效”，缓存条目卡死
对 NodeList 或 HTMLCollection 调用 new WeakRef(nodes) —— 报错，因为它们不是单个可弱引用对象

WeakRef 单独用会积累无效引用，必须配 FinalizationRegistry

只靠 WeakRef.deref() 轮询检查，无法及时清理缓存键。典型陷阱是：

html-to-pptx-converter

使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。

下载

cache.set(key, new WeakRef(obj)) 后，obj 被 GC 回收，cache 里仍存着这个 WeakRef 实例，cache.size 不变，查找变慢
FinalizationRegistry 回调中传入的 heldValue 用了对象（如 { key }），导致该对象因被 registry 持有而无法回收 —— 必须用 string 或 symbol
注册时漏传 unregisterToken（即 WeakRef 实例本身），后续无法精准注销，同一 key 可能被重复清理或根本不清

图像/Canvas 等资源需额外处理边界情况

DOM 元素类资源有特殊生命周期，WeakRef 不能自动覆盖：

HTMLImageElement 加载失败（onerror 触发）时，对象仍存在但无内容，WeakRef 不会 deref() 为 undefined，必须手动 cache.delete(key)
ImageBitmap 在部分浏览器（如旧版 Safari）不支持直接 registry.register()，需先包装成普通对象：const wrapper = { bitmap }; registry.register(wrapper, key, ref);
OffscreenCanvas 的 transferToImageBitmap() 返回的 ImageBitmap 同样受上述限制，不能直接当 WeakRef 目标注册

真正容易被忽略的是：WeakRef 和 FinalizationRegistry 都不控制对象是否该被回收，只响应“已被回收”。如果你在别处还存着那个 DOM 元素的强引用（比如一个未清除的 setTimeout 回调里用了它），它就永远不会被 GC，registry 回调也永远不会触发——所有弱引用机制都建立在这个前提之上。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索前端的入门与实战技巧！