Html5 canvas kineticjs层重绘优化

背景：我正在使用kineticjs开发一款实时多人html5画布游戏，主要在手机浏览器上玩。游戏中有很多事情在进行，比如每秒与服务器的套接字通信，基于服务器响应使用kineticjs重新绘制和动画，所有这些都在厚重的图形界面之上。这款游戏在桌面浏览器中运行良好，但在手机上运行缓慢。因此，我需要找到所有可以优化代码的方法

我的问题,

假设我需要根据刚从服务器收到的服务器响应重新绘制屏幕的特定部分，如果我将这些元素保留在单独的层中，那么我需要重新绘制较少的元素。在我的例子中，我需要第二次重新绘制，这会导致性能改进吗

如果上面的答案是肯定的，那么我应该划分布局的最佳层数是多少。我这样问是因为屏幕上有很多不同的部分需要根据不同的服务器响应重新绘制（虽然不是同时绘制），如果所有这些都需要放在不同的层中，我需要知道我可以将上面的逻辑延伸到什么程度，例如，我可以在不牺牲性能的情况下拥有10个不同的层，这是所有这些练习的目标

Eric Rowell（KineticJS的创建者）在这里做了一些压力测试：

他说：

“创建10个层，每个层包含1000个形状，以创建10000个形状。这将大大提高性能，因为从层中删除圆时，一次只需绘制1000个形状，而不是全部绘制10000个形状。”

“请记住，层太多也会降低性能。我发现，使用10层（每个层由1000个形状组成）比20层（由500个形状组成）或5层（由2000个形状组成）性能更好。”

那么你的外卖是什么

1.是，多个画布层隔离不同的重画组是一条可行之路

以及

2.要优化权衡（多画布的开销与1画布的简单性），您需要在它们将在其中运行的环境中使用自己的特定代码进行测试

---

祝你的游戏好运：）

我同意@markE的观点。我自己创建了一个简单的HTML5游戏，以移动设备为目标，我必须说，将游戏开发为原生Android/iOS代码，或者使用专门为游戏设计的HTML5框架，如ImpactJS或LimeJS，会更有价值。别误会我的意思，我喜欢KineticJS，并一直在这里提供问题的答案，但对于游戏来说，你只需要有一个专门针对这一点构建的工具。@EliteOctagon:+1用于查找和使用正确的工具我担心最好的答案是自己做家务：）能不能只画最近更新的区域，而不是整个图层？