canvas高性能绘制大批量图形的关键在于少画、分清动静、批量执行、避开主线程瓶颈：按样式分组合并路径、用空间索引筛选可见区域、分层离屏缓存静态内容、将计算卸载至web worker。
Canvas 高性能绘制大批量图形，关键不在“画得快”，而在“少画、分清动静、批量执行、避开主线程瓶颈”。单纯堆叠 draw 调用，哪怕只是 5000 个圆点，也极易让 CPU 卡在状态切换和路径重建上。
按样式分组 + 合并路径绘制
每次调用 fillStyle、beginPath() 或 fill() 都有固定开销。万级图形若逐个绘制，CPU 时间全耗在上下文调度上。
- 把图形按颜色、线宽、透明度等视觉属性归类，每组只设一次
ctx.fillStyle和调用一次fill() - 同组内复用路径：先
ctx.beginPath()，再循环ctx.rect()或ctx.arc()，最后统一ctx.fill() - 避免在循环中读写
ctx.globalAlpha等属性——提前算好值，直接传入 - 小圆点优先用
fillRect(x-r, y-r, r*2, r*2)替代arc()，快 3–5 倍且无抗锯齿开销
空间索引加速可见区域筛选
每帧遍历全部图形判断是否在视口内，是典型的 O(N) 性能陷阱。尤其在缩放、平移频繁的场景下，必须跳过不可见对象。
- 引入四叉树或网格哈希（Grid Hash），将坐标映射到二维桶中
- 渲染前仅查询与当前视口相交的几个桶，候选对象通常不足总数的 5%
- 动态图形移动时主动更新其在索引中的位置，不依赖每帧重建
- 超密集区域可叠加聚合逻辑：同一像素格内点数超阈值，只绘一个加权圆点
分层 + 离屏缓存静态内容
背景、坐标轴、UI 图标等长期不变的内容，反复重绘纯属浪费。它们应“固化”为图像资源，而非每帧重走路径。
- 拆成多个
<canvas></canvas>元素：background-canvas、data-canvas、ui-canvas，CSS 叠加定位 - 静态层预先绘制到
OffscreenCanvas，主线程用drawImage()复用，提速 5–20 倍 - 若某层内容长期稳定，进一步转为
ImageBitmap，启用 GPU 纹理缓存，避免像素拷贝 - 离屏 canvas 尺寸必须显式设置（非靠 CSS 缩放），否则贴图会模糊或拉伸
计算卸载到 Web Worker
粒子轨迹、坐标投影、缩放映射等纯数学运算，不该阻塞渲染主线程。尤其在低端设备上，这类计算常成为帧率瓶颈。
- 用 Web Worker 处理顶点批量计算、数据降采样、热力网格生成等任务
- 主线程通过
OffscreenCanvas.transferControlToOffscreen()获取句柄传给 Worker - Worker 完成绘制后，主线程直接合成结果，跳过
getImageData/putImageData的内存复制 - 交互反馈类操作（如高亮、拖拽）仍保留在主线程，确保响应及时
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
