我正在开发一款HTML5 Canvas实时战略游戏，使用JavaScript。为了确保游戏在低端移动设备上能够运行良好，我选择在旧版Google Pixel 3a上测试游戏。然而，性能在20个单位左右就会变得很糟糕。现在是2026年，我想找出实际的瓶颈并努力支持更大的战役，而不损害游戏的视觉效果或游戏性。

我正在寻找有经验的Canvas渲染、JavaScript游戏引擎和移动性能优化的人的建议。

以下是优化建议的具体问题：

  1. 性能分析： 如何确定瓶颈在Canvas绘制、AI、寻路、碰撞检测、动画或垃圾回收上？哪些性能分析工具和指标可以使用？

  2. 渲染架构： 是否保持当前的即时模式Canvas方式，引入精灵集和缓存精灵，使用离屏画布，还是考虑另一种架构？

  3. 绘制多个单位： 哪些技术在每个单位都有自己的位置、朝向方向、动画状态、健康值和战斗状态时提供最大的实际收益？是否使用简化精灵或动画级别的细节来绘制遥远的单位？

  4. 排序和裁剪： 是否定期排序整个单位数组是一个可行的折中？是否使用脏标志、增量排序、空间网格或其他可见性和深度排序策略？

  5. 模拟与渲染： 是否分离模拟更新和渲染，使用固定时间步长，还是减少AI和寻路的频率？如何做到这一点而不使战斗、编队或单位移动感到糟糕？

  6. 移动设备专属优化： 在Google Pixel 3a上运行浏览器或Android WebView时，哪些因素最重要？是否减少画布分辨率或设备像素比会产生显著的差异？

  7. Web Workers： 是否工作者有助于AI、寻路或其他计算，还是通信和同步开销会超过好处？