减少canvas状态变更次数是提升2d渲染效率最直接有效的手段；需按样式分组绘制、避免循环内重复赋值、慎用save/restore、合并路径、复用path2d、固化静态样式。
减少Canvas状态变更次数，是提升2D图形渲染效率最直接、见效最快的手段之一。Canvas上下文（ctx）的每个属性赋值——比如 fillStyle、strokeStyle、lineWidth、font——都会触发底层GPU状态切换，带来可观的性能开销。实测显示，单次 fillStyle 赋值耗时约80ms/百万次，而非法赋值（如设为 undefined）甚至达800ms以上。频繁切换不仅拖慢绘制，还会引发隐式同步和缓存刷新，导致帧率波动。
按样式分组绘制
把相同视觉属性的对象集中绘制，能大幅压缩状态变更频次。例如画100个矩形，其中60个红色、40个蓝色，不要交替设置颜色再画，而应：
- 先统一设
ctx.fillStyle = 'red'，再批量画完所有红色矩形 - 再设
ctx.fillStyle = 'blue'，批量画完蓝色矩形 - 避免在循环内重复设置相同值，提取到循环外一次性赋值
避免冗余 save() / restore()
save() 和 restore() 会保存和恢复整个绘图状态栈，调用层级越深，开销越大。很多场景其实无需完整状态保护：
- 仅需临时改一个属性（如只变字体大小），改完立刻设回，比 save/restore 更轻量
- 用局部变量记录关键状态（如当前 fillStyle），手动还原，绕过上下文栈操作
- 嵌套动画或复杂UI中，评估是否真需要多层状态隔离，能扁平化就扁平化
合并路径与复用绘图命令
每次 beginPath() + moveTo() + lineTo() 都是一次状态操作。对同类图形（如折线图的多段线、散点图的多个圆点）：
- 用单个
beginPath()启动，连续调用lineTo()或arc()构建完整路径，最后统一stroke()或fill() - 避免为每个小图形单独开路径，尤其在高频更新的实时图表中
- 对重复结构（如图标网格），预生成
Path2D对象，复用绘制，省去路径重建开销
静态样式提前固化
对于固定不变的样式（如UI控件的边框色、文字默认字号），不要在每帧都写一遍：
- 初始化时设置好
ctx.font、ctx.textAlign等，运行中只在必要时才改 - 封装绘图函数时，把样式参数作为可选配置，内部做“是否已设置”的判断，避免重复赋值
- 使用对象池管理带样式的绘图单元，复用已配置好的 context 状态实例
状态切换不是“不能用”，而是要意识到它有成本。控制变更节奏、合并同类操作、剥离无关逻辑，就能让每一帧的绘制更干净、更可控。不复杂但容易忽略。
