canvas批量渲染性能优化关键在于减少状态切换与冗余调用：①合并路径统一填充/描边；②预渲染静态图形至离屏canvas再贴图；③前置计算坐标颜色等参数；④进阶启用gpu纹理缓存。
Canvas批量渲染图形对象，关键不在“画得多”，而在“画得巧”。真正拖慢性能的，往往不是图形数量本身，而是重复的状态切换、冗余调用和未固化的计算过程。掌握几个核心动作，就能让千个图形像画一个一样快。
合并路径，一次填充或描边
Canvas每次调用beginPath()、fill()或stroke()都会触发底层状态校验与管线调度。对同类图形（比如1000个同色矩形），别逐个画：
- 提前设好
ctx.fillStyle或ctx.strokeStyle，只设一次 - 用
ctx.rect(x, y, w, h)连续添加所有图形到同一路径 - 最后统一调用
ctx.fill()或ctx.stroke()
这样能把调用次数从2000+降到个位数，实测提速3–5倍。
预渲染到离屏Canvas复用
静态图形一旦确定，就该“固化”——不再每帧重算重画。
- 创建不可见的离屏Canvas：
const offscreen = document.createElement('canvas')，设好宽高 - 获取其2D上下文，一次性绘制全部静态内容（如图标集、网格背景、固定图例）
- 主画布中直接
ctx.drawImage(offscreen, x, y)贴图，即使缩放旋转也比重绘路径快5–20倍
适用于地图底图、UI框架、图表坐标轴等长期不变的部分。
前置计算，避免循环内读取
绘制循环里访问ctx.lineWidth、getBoundingClientRect()或解析CSS变量，会强制同步布局，帧率骤降。
- 所有坐标、颜色、尺寸在循环前算好，存进数组或对象
- 用标准
for或forEach遍历数据（V8对其有深度优化），不用for...in - 不在
requestAnimationFrame里查DOM或读样式——静态图形不需要响应式重排
启用GPU纹理缓存（进阶）
对超大规模静态图（如数万粒子、矢量图标阵列），可进一步把离屏Canvas转为硬件纹理：
-
const bitmap = await createImageBitmap(offscreen) - 后续用
ctx.transferFromImageBitmap(bitmap)实现零拷贝贴图
注意兼容性：Chrome/Firefox支持良好；Safari需iOS 16.4+/macOS 13.3+，旧环境自动降级为drawImage
不复杂但容易忽略——高性能不是靠“画得快”，而是“少画几次”。
