kineticjs层优化重绘(kineticjs layers redraw optimizatio

背景：我正在开发使用这主要是将手机浏览器中播放kineticjs实时多人HTML5画布游戏。 有很多游戏中的事情，如与服务器socket通信每一秒，重绘和使用基于服务器的响应和kineticjs这一切了沉重的图形界面的顶部动画。 然而，游戏功能在桌面浏览器以及是mobilephones低迷。 所以，我需要找到其中的代码可以被优化的所有方式。

我的问题，

1. 可以说，我需要重绘根据我刚刚从服务器接收到的服务器响应画面的特定部分，我应该保持在一个单独的层中的这些需要，对被重绘元素，所以，我需要重新绘制较少的元素。 作为我来说，我需要不断重绘第二，这是否会导致性能的改善？

2. 如果答案以上是肯定的，那么什么是我要分我的布局层的最佳数量。 我问这个，因为我有很多需要重绘根据不同的服务器响应屏幕上的不同部分（虽然不是全部在同一时间），如果所有这些都需要放在不同的层，我需要知道如何到目前为止我可以伸展逻辑以上，例如我可以有10个不同的层，而不会牺牲其所有这项工作的目的无论如何性能。

Answer 1:

埃里克·罗威尔（KineticJS的创建者）已经在这里做了一些压力测试： http://www.html5canvastutorials.com/labs/html5-canvas-kineticjs-drag-and-drop-stress-test-with-1000-shapes/

他这样说：

“创建10层各自含有1000周的形状，以创建万点的形状。这极大地提高了性能，因为只有1000的形状将在当一个圆从层而不是所有10,000个形状除去的时间要绘制”。

“请记住，有太多的层也可以减缓性能。我发现，使用10层，每层由1000个的形状进行优于20层，500种形状或5层，2000点的形状。”

所以，你的外卖是，

1. 是 ，该隔离redrawables的不同组中的多个帆布层是去的方式。

和，

2.To优化权衡（多画布的开销对1个帆布简单）， 你需要在他们内操作环境与自己的特定代码进行测试 。

祝你游戏:)

文章来源: kineticjs layers redraw optimization