Canvas 渲染管线
理解 Canvas 的渲染管线是优化的第一步：JavaScript 调用 Canvas API 绘制指令，浏览器将指令提交到渲染队列，GPU 执行实际的像素填充操作，合成器将 Canvas 层与其他 DOM 元素合并。
优化技巧一：离屏渲染
对于静态或变化不频繁的内容，预先渲染到离屏 Canvas 可以大幅提升性能。创建离屏 Canvas，绘制复杂背景，主循环中直接复制，比重新绘制快 10 倍以上。
优化技巧二：脏矩形检测
只重绘发生变化的部分，而不是整个画布。标记脏区域，只清除和重绘这些区域，减少不必要的绘制调用。
优化技巧三：避免状态切换
Canvas 状态切换（fillStyle、strokeStyle 等）是有开销的。批量处理相同状态的绘制，按颜色分组后再统一绘制。
优化技巧四：使用 requestAnimationFrame
正确的动画循环方式：计算时间差，更新逻辑，渲染画面，请求下一帧。页面不可见时自动暂停，节省资源。
性能监控
使用 Chrome DevTools 的 Performance 面板分析 Canvas 性能：FPS 计数器、GPU 时间线、Paint 事件、Memory 面板。
总结
Canvas 性能优化是一个系统工程，需要结合具体场景选择合适的策略。核心原则：减少绘制调用次数、避免不必要的状态切换、利用离屏缓存静态内容、只重绘变化区域、使用合适的动画循环。