背景：我正在使用 kineticjs 开发一个实时多人 html5 画布游戏，主要将在手机浏览器上播放。游戏中发生了很多事情，例如每秒与服务器的套接字通信，使用基于服务器响应的 kineticjs 重绘和动画，所有这些都在繁重的图形界面之上。该游戏在桌面浏览器中运行良好，但在手机上运行缓慢。所以，我需要找到可以优化代码的所有方法。
我的问题，
假设我需要根据刚刚从服务器收到的服务器响应重绘屏幕的特定部分，我是否应该将这些需要重绘的元素保留在单独的层中，以便我需要重绘更少的元素。就我而言，我需要每秒钟重新绘制一次，这会导致性能提升吗？
如果上面的答案是肯定的，那么我应该划分布局的最佳层数是多少。我问这个是因为屏幕上有很多不同的部分需要根据不同的服务器响应重新绘制（尽管不是同时），如果所有这些都需要放在单独的层中，我需要知道如何到目前为止，我可以扩展上面的逻辑，例如，我可以在不牺牲性能的情况下拥有 10 个不同的层，而这正是所有这些练习的目标。
Eric Rowell（KineticJS 的创建者）在这里做了一些压力测试：http: //www.html5canvastutorials.com/labs/html5-canvas-kineticjs-drag-and-drop-stress-test-with-1000-shapes/
他说：
“创建 10 个图层，每个图层包含 1000 个形状以创建 10,000 个形状。这极大地提高了性能，因为从图层中删除一个圆圈时，一次只需要绘制 1,000 个形状，而不是所有 10,000 个形状。”
“请记住，层数过多也会降低性能。我发现使用 10 层，每层由 1,000 个形状组成，其性能优于 20 层和 500 个形状或 5 层和 2,000 个形状。”
所以你的收获是
1.是的，隔离不同组的可重绘对象的多个画布层是要走的路。
和，
2.为了优化权衡（多个画布的开销与 1 个画布的简单性），您需要在它们将在其中运行的环境中使用您自己的特定代码进行测试。
祝你的游戏好运:)