Canvas批量绘制静态图形的性能优化核心是减少上下文状态切换与冗余调用：合并路径单次fill/stroke、预渲染至离屏Canvas、前置计算避免动态读取、必要时用createImageBitmap启用GPU纹理缓存。
Canvas批量绘制静态图形时，性能瓶颈通常不在绘图本身，而在于重复的上下文状态切换、冗余调用和未优化的内存访问。核心策略是减少ctx操作频次、复用绘制逻辑、避免实时计算，并将静态内容“固化”为图像或离屏缓存。
合并路径与单次stroke/fill
每次调用beginPath()、moveTo()、lineTo()或fill()都触发底层状态校验和渲染管线调度。对大量同类图形（如1000个矩形），不要逐个绘制：
- 用
rect()连续添加所有矩形到同一路径，再统一fill()或stroke() - 避免在循环内反复设置
fillStyle——若样式一致，提前设一次即可 - 例如绘制同色方块网格：
ctx.fillStyle = '#3498db'; ctx.beginPath(); for(...) { ctx.rect(x, y, w, h); } ctx.fill();
使用离屏Canvas预渲染图层
静态图形一旦确定，就不再变化，适合预先绘制到一个不可见的offscreenCanvas中，后续仅用drawImage()整帧复制。这比重绘路径快5–20倍（取决于图形复杂度）：
- 创建离屏Canvas：
const offscreen = document.createElement('canvas'); offscreen.width = w; offscreen.height = h; - 获取其2D上下文，一次性绘制全部静态元素
- 主Canvas中用
ctx.drawImage(offscreen, x, y)复用——即使缩放/旋转，也比重绘路径高效 - 适用于地图底图、UI背景、图标集等长期不变的内容
避免动态计算与属性读取
在绘制循环中读取ctx.lineWidth、ctx.canvas.width或调用getBoundingClientRect()会强制同步布局，严重拖慢帧率：
立即学习“前端免费学习笔记（深入）”；
- 所有尺寸、颜色、偏移量在绘制前算好，存入数组或对象，循环中只做纯数值访问
- 不用
for...in遍历图形数据——改用标准for或forEach，V8对其有深度优化 - 避免在
requestAnimationFrame中解析CSS变量或查询DOM——静态图形无需响应式重排
启用GPU加速的位图缓存（WebGL后备）
对超大规模静态图形（如数万粒子、矢量图表），可借助createImageBitmap()将离屏Canvas转为硬件纹理：
offscreen.getContext('2d').drawImage(...); const bitmap = await createImageBitmap(offscreen);- 后续用
ctx.transferFromImageBitmap(bitmap)（需开启willReadFrequently: false）实现零拷贝贴图 - 注意兼容性：Chrome/Firefox支持良好，Safari需iOS 16.4+/macOS 13.3+，旧环境自动降级为
drawImage
不复杂但容易忽略——高性能不是靠“画得快”，而是“少画几次”。静态即冻结，路径即批处理，状态即复用。
