离屏渲染提升图表性能的核心是分层缓存稳定内容：坐标轴标签、网格线、图例底框、数据节点模板、静态趋势线等满足“长期不变+重绘开销大”者应预绘至离屏Canvas；分层需匹配更新节奏，尺寸须按devicePixelRatio设整数像素，重绘仅触发于真实变更。
离屏渲染对复杂图表绘制的性能提升，核心是把“画一次、贴多次”的逻辑用对——不是所有图层都值得缓存，也不是所有变化都要重画。关键在于识别哪些内容稳定、哪些开销大，并让缓存真正复用起来。
哪些图表内容适合放进离屏画布
判断标准就两条：内容长期不变 + 单次重绘调用远多于 drawImage。比如：
- 带多重阴影、渐变填充和抗锯齿文字的坐标轴标签，每帧重绘可能调用 10+ 次 fillText / strokeRect，预绘到离屏 Canvas 后只需 1 次 drawImage
- 固定网格线、图例底框、背景色块，几乎从不变化，建一个大尺寸离屏 Canvas 一次性绘制即可
- 统一风格的数据节点（如圆点+描边+小图标），批量预绘为 ≤256×256 的模板画布，按类型复用
- 静态趋势线或参考线（如均值线、安全阈值线），路径固定，可缓存为 Path2D 或小离屏 Canvas
分层结构要匹配更新节奏
一张图表里，真正每帧变动的往往只有数据点位置、高亮区域、实时拖影。其他部分应拆成独立图层，各自生命周期：
- 背景层：网格、坐标轴、标题栏，初始化后基本不动
- 静态图元层：图例、单位标注、固定装饰元素，主题切换时批量重建
- 数据模板层：点、柱、扇形等基础图形样式，资源加载完即预绘
- 动态层：正在动画的数据点、鼠标悬停高亮、实时连线，保留在主 Canvas 上每帧绘制
尺寸与像素比必须显式控制
Canvas 渲染模糊、裁剪或空白，90% 出在尺寸设置错误：
立即学习“Java免费学习笔记（深入）”；
- 离屏 Canvas 的 width/height 必须设为整数像素值，不能靠 CSS 缩放；例如主画布 clientWidth 是 800px，devicePixelRatio 是 2，则 offscreen.width = 1600
- 主 Canvas 若已用 CSS 缩放（如 width: 400px; transform: scale(2)），离屏尺寸仍需按最终渲染像素计算
- 避免全屏一张离屏 Canvas：内存涨得快、缩放失真、一动全刷；按功能块拆分更可控
重绘时机要精准，不是每帧都刷
离屏画布的价值是“少画”，不是“多画”。只在真实变更发生时才触发重建：
- 监听主题配置变更、字体加载完成、缩放比例跳变（如 zoom 从 1.0 → 1.8）时批量刷新对应图层
- 使用脏矩形机制：记录数据点移动范围，仅 clearRect + 重绘受影响的局部离屏区域
- 关闭图像平滑：ctx.imageSmoothingEnabled = false，尤其对线条、图标类图形更锐利
- 获取上下文时禁用冗余能力：getContext('2d', { willReadFrequently: false })
