提高 KineticJS 性能的最佳方法是什么，尤其是在移动设备上？

Question

由于我的移动 Web 应用程序存在一些严重的性能问题，我想提供我的解决方案并寻求进一步的提示和技巧，以保持 KineticJS 的性能，尤其是在移动设备上...

在我的情况下，在桌面浏览器上一切似乎都很好，但该应用程序使移动设备及其浏览器崩溃。过了一会儿，我发现浏览器的高度和宽度（或者更好的是：视口）比原来的设备分辨率高很多。为了解决这个问题，我只是在index.html 中添加了以下行：

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">

所以我很高兴听到，如果你们中的任何人找到了一些其他方法来保持性能，或者在使用 KineticJS 时是否有任何特殊的性能杀手要避免。

Answer 1

我也刚刚开始使用 KineticJS，但一直在大量使用它，因为我们正在构建一个画布网络应用程序。我发现影响性能的事情是：

你在一个图层上绘制的形状越多，速度就越慢。

您应用的补间/动画越多，一切就越慢。

这些事情很明显，所以我将更详细地解释我们为解决这个问题所做的工作。

如果您要绘制 10,000 个形状，在 1 层上绘制它们比绘制 10 层并在每层添加 1,000 个形状要慢。但是绘制 20 层，每层添加 500 个形状比上一层要慢。

不知何故，您必须尝试不同的方法，看看哪一种影响较小。

另一件事。避免操纵不必要的物体。例如，如果您有 10 个组，每个组有 100 个形状。一次只能看到一个组，您将在该组上应用补间；不要懒惰并为所有组应用补间，而是在其中做一些工作，然后将补间应用到那个可见的组上。

还鼓励形状缓存。

除了这些，我没有其他想法。我目前正在处理这一切。这对我来说很新。但是我看到没有人做过任何 cmets，所以我想把我的 2 美分投入池中。