Canvas图形批量渲染需按样式分组绘制并善用离屏Canvas缓存。先用Map按fillStyle等属性聚类，每组统一设样式、连续绘路径、单次fill；静态内容预绘至离屏Canvas后复用drawImage；避免动态计算颜色、频繁save/restore及同步布局读取。
Canvas图形属性批量设置不是“设得越多越快”，而是要在状态复用与路径隔离之间找平衡点。同一组图形若样式完全一致，批量设置一次fillStyle、lineWidth等属性能显著减少上下文切换；但若强行合并不同样式图形，反而会因频繁重置路径或插入条件判断拖慢整体渲染。
按样式分组再批量绘制
不要把所有图形塞进一个beginPath()，也不要每个图形都调用一次fill()。正确做法是先按fillStyle、strokeStyle、lineWidth等关键属性聚类，每组内统一设置样式、连续添加路径、单次提交绘制：
- 遍历原始数据，用Map或对象按样式哈希分组，例如
{'red-2': [rect1, rect2], 'blue-1': [rect3]} - 对每组调用
ctx.fillStyle = key; ctx.beginPath()，再循环ctx.rect(x, y, w, h)，最后ctx.fill() - 避免在组内混入需不同clip、transform或globalAlpha的图形——它们应单独成组
离屏Canvas固化静态样式组合
如果某组图形（如UI图标网格、地图图例）样式固定且长期不变，直接在离屏Canvas上预绘整块图层，后续仅用drawImage复用：
- 创建offscreen canvas，尺寸匹配目标区域，一次性绘制该组全部图形
- 主画布中不再调用任何路径API，只执行
ctx.drawImage(offscreen, x, y) - 特别适合字体图标、按钮背景、网格线等重复性强、更新频率低的内容
避免“伪批量”带来的隐性开销
表面看是批量操作，实际可能引入更高成本。以下情况需警惕：
- 为省一次fillStyle设置，在循环中用三元运算动态计算颜色字符串：
ctx.fillStyle = item.type === 'A' ? '#f00' : '#00f'——字符串拼接+状态校验反而比提前分组更慢 - 在批量路径中穿插save/restore：每次调用都触发栈操作和状态拷贝，破坏批量收益
- 用getBoundingClientRect()或getComputedStyle()读取DOM值来决定样式——强制同步布局，单次调用就可能吃掉数毫秒
动态属性变化时的轻量更新策略
当部分图形需响应式变色或缩放，但整体结构静态，可采用“属性映射+位图缓存”替代实时重绘：
- 将基础图形预绘到离屏Canvas，再用
createImageBitmap()转为GPU纹理 - 通过
ctx.filter = 'hue-rotate(XXdeg)'或ctx.globalAlpha叠加轻量效果 - 若需精确着色，可预先生成几套常用配色的离屏图层，运行时按需切换，而非逐像素计算
