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

Question

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

就我而言，在桌面浏览器上一切似乎都很好，但应用程序使移动设备及其浏览器崩溃。一段时间后，我发现浏览器(或更好:视口(viewport))的高度和宽度比原始设备分辨率高得多。为了解决这个问题，我只是在我的 index.html 中添加了以下行:

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

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

Answer 1

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

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

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

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

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

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

还有一点。避免操作不必要的对象。例如，如果您有 10 个组，每个组有 100 个形状。一次只能看到一个组，您将在该组上应用补间；与其懒惰地为所有组应用补间，不如投入一些工作，然后将补间应用于那个可见的组。

也鼓励使用形状缓存。

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