canvas本身不泄漏，泄漏的是未清理的getcontext()返回对象及webgl纹理、缓冲区等gpu资源；必须显式调用clearrect()、deletetexture()、close()等并置null，否则v8 gc无法回收。
Canvas 标签本身不泄漏，泄漏的是你没清理的 getContext('2d') 或 getContext('webgl') 返回的对象、绑定的纹理、着色器、帧缓冲——它们全在 GPU 显存里，V8 GC 完全看不见。
Canvas.getContext() 返回的对象必须显式断开引用
只要 ctx 还被 JS 变量持有，哪怕 canvas 已从 DOM 移除、canvas.width = 0、甚至 canvas = null，底层像素数据和渲染状态仍驻留在 GPU 显存中，且无法被自动回收。
- 正确做法：不再使用时，先清空画布：
ctx.clearRect(0, 0, canvas.width, canvas.height) - 再切断上下文强引用：
ctx = null - 最后重置 canvas 尺寸（尤其对 WebGL）：
canvas.width = 1; canvas.height = 1，强制释放显存分配 - 错误写法：
canvas.remove(); ctx = null;—— 缺少clearRect和尺寸重置，显存大概率残留
WebGL 纹理/缓冲区泄漏比 Canvas 2D 更隐蔽
WebGL 的 createTexture()、createBuffer()、createFramebuffer() 都返回 GPU 资源句柄，这些句柄一旦创建就必须配对调用 deleteTexture()、deleteBuffer()、deleteFramebuffer()。V8 不管这些，浏览器 Blink 层也不自动回收。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 常见陷阱：在组件销毁时只清空 JS 对象，漏掉
gl.deleteTexture(texture) - 更危险的是：用
gl.bindTexture()绑定后未解绑，导致后续deleteTexture()失效（绑定状态阻止释放） - 验证方法：打开 Chrome DevTools → Memory 面板 → 拍堆快照 → 筛选
WebGLTexture或WebGLBuffer，看 Delta 是否持续为正 - 注意：
gl.deleteXXX调用后，对应 JS 对象仍存在（只是无效句柄），需同步设为null避免误用
Performance 面板里 Nodes 曲线涨但 JS Heap 不涨？重点查 Native Heap
DOM 节点数（$$('*').length）稳定，JS Heap 波动小，但页面卡顿、GPU 占用飙升——这说明泄漏发生在 Blink 的原生 C++ 堆或 GPU 显存，不在 JS 控制范围内。
- Chrome 的 Performance 面板勾选 “Memory” 后，灰色柱状图中的
Nodes是 DOM 引用计数，JS Heap是 V8 堆，而Native Heap（需手动开启）才反映 Blink 渲染层内存，包括 Canvas 像素缓存、合成层位图等 - 若
Native Heap持续上涨，且与 canvas 使用频率正相关，基本锁定是未释放的OffscreenCanvas、重复调用transferControlToOffscreen()未回收、或createImageBitmap()返回对象未close() - 关键动作：每次创建
OffscreenCanvas后，务必在 worker 中调用offscreenCanvas.close()；ImageBitmap用完立即bitmap.close()
最易被忽略的一点：Canvas 元素设为 display: none 或移出视口，完全不影响其上下文或 GPU 资源占用——显存不会因不可见而自动释放，必须靠代码主动清理。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
