创建可重复的压力场景
使用已知数量的移动对象、重叠效果和文本标签构建测试状态。捕获录音或固定种子，以便每次运行呈现大致相同的工作。将空场景基线与拥挤场景进行比较，然后检查 JavaScript 更新、画布绘制、图像解码或样式和布局工作是否花费了时间。
如果主要耗时在绘制上，可以尝试批量处理相似路径、减少不必要的状态切换，或只绘制发生变化的区域。如果主要耗时在更新逻辑上，就用性能分析工具检查碰撞检测和对象遍历。MDN 的 Canvas 优化指南将这些作为需要评估的选项，并未保证任何选项都能普遍提速。
更改一项成本并验证结果
选择一个可能的耗时来源，例如反复绘制静态背景。将背景缓存到离屏 Canvas 中，然后在相同场景下比较修改前后的结果。还要检查不同尺寸和调整窗口大小后的画面；如果缓存使用了旧尺寸或文本缩放比例不同，结果可能会不正确。
记录比较所用的设备、浏览器、场景和操作。一台设备上的结果有助于诊断这次运行，但不能代表所有浏览器和设备。即使某项优化改善了合成测试场景，也可能让其他场景的操作响应变差，因此要重新测试原来的交互。
关于Canvas 游戏性能的常见问题
我应该只重画改变的像素吗？
这取决于场景复杂度以及完整重绘的成本。局部绘制会增加状态管理，也可能在移动对象周围留下旧像素，因此要在相同的可重复场景中比较两种方式。
批量处理 Canvas 绘制操作一定会有帮助吗？
不一定。这些只是值得验证的假设。测量目标浏览器和工作负载；只有在改善已观察到的瓶颈且不破坏画面时才保留改动。
延伸阅读
发现信息过时了？ 报告需要更正的内容