什麼是提高KineticJS性能的最佳方法，特別是在移動設備上？

Question

因爲我有一些嚴重的性能問題與我的移動Web應用程序，我想提供我的解決方案，並要求進一步提示&技巧來維持KineticJS的性能提升，特別是在移動設備上...

在我在桌面瀏覽器上，一切似乎都很好，但應用程序使移動設備及其瀏覽器崩潰。過了一段時間，我發現瀏覽器的高度和寬度（或更好：視口）遠高於原始設備分辨率。要解決這個問題，我只是添加了以下線在我index.html：

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

所以我會很高興地聽到，如果有人對你已經發現了一些其他方面把性能提升，或者有什麼特殊的表現 - 使用KineticJS時應避免使用冷凝器。

Answer 1

我剛剛開始使用KineticJS，但一直在使用它，因爲我們正在構建一個工作中的畫布Web應用程序。我發現影響性能的因素有：

您在圖層上繪製的形狀越多，所有東西就越慢。

你應用的補間/動畫越多，一切就越慢。

這些事情非常明顯，所以我會稍微詳細地解釋我們爲解決這個問題所做的一切。

如果要繪製10,000個形狀，在1層上繪製它們會比繪製10層圖層更慢，並且每層添加1,000個形狀。但是每層繪製20層並添加500個形狀比最後一層要慢。

不知何故，你必須嘗試不同的方法，看看哪一個影響更少。

另一件事。避免操縱不必要的對象。例如，如果您有10個組，並且每個都有100個形狀。一次只能看到一個組，並且您將在該組上應用補間;而不是懶惰，併爲所有羣體應用補間，將一些工作放入其中，並將補間應用於該可見羣組。

還鼓勵形狀緩存。

除了這些，我沒有其他的想法。我目前正在處理這一切。這對我來說很新鮮。但是我看到沒有人提出任何評論，所以我想把我的2美分投入池中。