EaselJS中大量動畫位圖的速度

Question

使用EaselJS時，我似乎在使用大量動畫位圖（全部基於同一個spritesheet）時遇到了一些問題。當我在舞臺上同時演奏這些樂曲時，幾乎沒有任何問題，但是當同時播放更多樂曲時（從30到40開始）同時移動它們時，我開始讓它們「閃爍「相當多，甚至在10左右的fps。

我沒有使用任何陰影或沿着這些線的任何其他東西。只需使用動畫位圖並移動它們即可。

有沒有人有任何提高這種性能的好建議？

Answer 1

嘗試同時使用幾個Stage對象。

Answer 2

沒有看到您的代碼，很難確切地知道瓶頸在哪裏。但這裏有幾個地方開始尋找（與更瑣碎的修復開始）：

1. 確保您使用的是最新的瀏覽器。 至少，請檢查其他幾個瀏覽器/平臺，看看它是否有任何重大的性能變化。據我所知，在非硬件加速畫布實現上，EaselJS的性能明顯更差。

2. 如果可以，請使用createJS的TweenJS版本來使用其他補間庫。 TweenJS將自己與EaselJS的Ticker類相結合，這是更有效的。

3. 除非絕對必要，否則不要致電stage.update()。由於stage.update()是如此昂貴的通話，你應該儘可能地小氣。事實上，如果你使用Ticker來定期更新舞臺，你根本不應該調用它。

4. 明智而積極地緩存。如果舞臺上有複雜的靜態元素，緩存它們會節省一些週期。但是，緩存開銷太大，因此需要爲具有大量靜態元素或複雜繪製形狀的容器進行保存。

5. 降低EaselJS檢查鼠標懸停的頻率。如果您在舞臺上啓用了鼠標懸停，請傳入較低的頻率（documentation）。如果你不需要它（如果你只是在聽點擊），不要啓用它。監視鼠標是非常昂貴的，特別是如果舞臺上有很多元素的話。

6. 將stage.snapToPixelsEnabled設置爲true。這可能或不會幫助。理論上講，在整個像素上渲染位圖效率要高得多，但這可能會導致一些動畫變得鋸齒狀，我還沒有充分了解其他優缺點。

我能得到與在30FPS左右600-800 spritesheets和基本補間上一個4歲的iMac（只是一個快速測試）使用Chrome不俗的表現。