离屏canvas优化需同时满足内容长期不变且单次绘制开销高于drawimage，适用于静态ui、固定图元等场景；盲目使用反增内存与同步成本。
这是提升 Canvas 渲染性能最直接有效的方式之一，核心不是“多画一次”，而是用一次预绘制换掉每帧重复的高开销操作。
什么图形适合缓存到离屏 Canvas
不是所有内容都值得缓存。真正受益的是那些：
- 内容长期不变（比如 UI 按钮、图例、网格背景、固定文字标题）
- 单次绘制成本高（例如含阴影、渐变、多段路径、大量文本渲染）
- 被高频复用（每帧都要 drawImage 贴一次，而不是每帧重绘）
如果图形每帧都在变（如粒子轨迹、实时折线），缓存反而拖慢速度——内存占用上升，同步逻辑变重，还可能因频繁重建离屏画布导致性能更差。
创建和配置离屏 Canvas 的关键细节
离屏 Canvas 不是“隐藏的 canvas 元素”，而是一个独立的、不挂载 DOM 的绘图缓冲区。正确初始化才能避免空白、模糊或兼容问题：
- 优先用 OffscreenCanvas 构造函数（现代浏览器支持），主线程或 Web Worker 中都能用
- 若需兼容旧环境，用
document.createElement('canvas')，但必须显式设置 width/height 像素值（不能靠 CSS 缩放） - 高 DPI 设备下，宽高需乘以
window.devicePixelRatio，否则图像模糊或错位 - 离屏 Canvas 不需要添加到页面，也不用设
display: none
预绘制与复用的实操要点
缓存的价值不在“画出来”，而在“不重画”。很多性能问题源于错误的更新节奏：
- 只在内容真实变更时重绘离屏画布（例如主题切换、语言变化、配置加载完成）
- 用 dirty 标志位控制更新，避免动画循环里反复清空+重绘
- 多层结构可分层缓存（底图层 + 标注层），按需刷新对应层
- 离屏上下文不继承主画布状态，每次使用前需显式设置 font、fillStyle、lineWidth 等
主 Canvas 中高效贴图
最终一步就是把缓存结果快速合成到主画布上，这步要轻、准、稳：
- 用
ctx.drawImage(offscreen, x, y)最简形式即可平移贴图 - 支持缩放/裁剪：
ctx.drawImage(offscreen, sx, sy, sw, sh, dx, dy, dw, dh) - 叠加透明度、变换、裁剪区域时，只要离屏 canvas 未被污染（无跨域图、资源加载完成），效果仍能正确生效
- 所有用于离屏绘制的
<img>必须设crossOrigin = 'anonymous'，服务端响应头也要带Access-Control-Allow-Origin
不复杂但容易忽略。关键是判断该不该缓、什么时候重绘、怎么贴得干净利落。
