canvas内存碎片化主因是缓冲区未主动归还与频繁重建，需用全局/静态缓冲、复用同一canvas、预建尺寸池，并显式回收离屏引用，配合内存监控验证。
Canvas 绘图缓冲区未及时清理，会导致大量短期分配的像素内存块反复创建又未归还，尤其在动画循环或高频截图场景下，极易引发内存碎片化——表现为可用内存总量尚可，但无法分配连续大块（如全屏离屏 Canvas），最终触发 OOM 或卡顿。解决核心在于“主动归还”和“复用控制”，而非依赖 GC。
明确缓冲区所有权，杜绝栈分配与临时堆分配
LVGL 的 lv_canvas_set_buffer 或 Web Canvas 的 canvas.width/height 设置，本质是向系统申请一块连续内存。若该内存来自函数局部栈（如 uint8_t buf[1024*768*2]）或未管理的 malloc，函数返回或作用域结束即失效，LVGL 后续绘制会越界写入，破坏相邻内存块，加速碎片化。
- 使用全局或静态缓冲区：确保生命周期覆盖 Canvas 对象整个存在期
- Web 端优先用
Uint8ClampedArray或Uint16Array显式分配，避免new Array()产生非连续 JS 堆对象 - LVGL 中若需动态尺寸，用
lv_mem_alloc()分配，并在 Canvas 销毁前调用lv_mem_free()
强制复用已有缓冲区，禁止频繁重建
每次调用 canvas.width = w; canvas.height = h（Web）或重新 lv_canvas_create()（LVGL），都会触发底层内存释放 + 新分配。即使大小相同，新地址也大概率不同，旧内存块滞留为碎片。
- Web 端：固定 Canvas 尺寸，通过
ctx.clearRect()或ctx.putImageData()复用同一缓冲区；避免在动画循环中修改width/height - LVGL 端：不销毁再重建 Canvas 对象，改用
lv_canvas_fill_bg()清空，或直接操作缓冲区指针重绘关键区域 - 对多尺寸需求（如响应式），预建 2–3 个常用尺寸的 Canvas 缓冲区池，按需切换，不新建
离屏 Canvas 需显式回收引用链
离屏渲染（document.createElement('canvas')）常被忽略：其 getContext('2d') 返回的上下文、绑定的 ImageData、甚至克隆的 DOM 节点，都会持有缓冲区内存引用。浏览器 GC 不保证及时回收这些交叉引用。
- 用完立即置空：将
offscreenCtx、offscreenImageData设为null - 移除 DOM 残留：若离屏 Canvas 插入过 iframe 或隐藏容器，手动
container.removeChild(offscreen) - html2canvas 场景：必须调用
DocumentCloner.destroy()清理克隆树，否则整棵 DOM 节点树驻留内存
监控与验证碎片化是否缓解
仅看总内存占用下降不够，要确认大块内存可分配：
- Web 端：在 DevTools Memory 面板录制 Allocation Instrumentation，观察 “Native memory” 中连续大块（>1MB）是否稳定出现
- LVGL 端：启用
LV_MEM_CUSTOM == 1并接入lv_mem_monitor_t，关注free_size和largest_free差值——若后者长期远小于前者，即存在严重碎片 - 压力测试：连续执行 1000 次相同尺寸离屏绘制 → 清理 → 再分配，记录第 1 次与第 1000 次的分配耗时，增幅应
