canvas性能问题根源在于内存管理失当和生命周期失控：需匹配设备像素比设置尺寸、控制单canvas内存≤20mb、显式清理离屏canvas、复用imagedata、动画结束切断资源链，并在卸载时清空上下文与引用。
Canvas性能问题常不源于绘制逻辑本身，而在于内存管理失当和Canvas对象生命周期失控。内存占用过高会直接触发浏览器回收压力，甚至导致页面崩溃；对象未及时释放则积累成内存泄漏，尤其在频繁创建/销毁Canvas的场景中尤为明显。
Canvas尺寸与设备像素比要匹配
高分辨率屏幕下盲目放大Canvas宽高属性，会导致内存指数级增长。比如在2x DPR设备上设置canvas.width = 1920、canvas.height = 1080，实际分配的是3840×2160像素缓冲区，内存占用接近原尺寸的4倍。
- 正确做法是按CSS尺寸乘以
window.devicePixelRatio设置Canvas内在尺寸 - 用
canvas.style.width和canvas.style.height控制显示大小，保持缩放清晰 - 移动端单Canvas内存建议控制在20MB以内
离屏Canvas要显式清理
预渲染静态内容时常用离屏Canvas，但若仅保留引用而不释放，极易堆积内存。特别是页眉页脚等复用内容，缓存一次后应避免重复创建。
- 不再使用的离屏Canvas，调用
canvas.remove()并将其引用置为null - 对固定内容（如水印、背景图）生成一次Canvas后缓存，后续直接
drawImage复用 - 避免在循环或高频事件中反复
document.createElement('canvas')
ImageData对象必须复用
每次调用ctx.createImageData()都会分配新内存块，频繁操作像素（如滤镜、粒子计算）时极易引发内存碎片。
- 初始化阶段创建一次ImageData，后续通过
ctx.putImageData()更新内容 - WebAssembly环境可用
using块确保作用域结束自动释放（Kotlin/Wasm场景） - 像素操作前先检查是否已有可用ImageData实例，优先复用而非新建
动画结束必须切断资源链
Canvas动画停止后，若未清理定时器、事件监听或粒子对象，相关闭包和DOM引用将持续驻留内存。
- 使用
requestAnimationFrame时，退出动画务必调用cancelAnimationFrame - 粒子库（如canvas-confetti）需关注
tickets、particleCount等参数，避免短时间高频触发 - 页面卸载或组件销毁时，在
onUnload或componentWillUnmount中清空Canvas上下文、移除图像源引用
