EaselJS中大量动画位图的速度

Question

使用EaselJS时，使用大量动画位图（均基于相同的spritesheet）似乎有些麻烦。当我在舞台上同时运行其中几个时，根本没有问题，但是当同时运行更多数量（从大约30到40开始）同时移动它们时我开始拥有它们“闪烁“相当多，即使是在10左右的fps。

我没有在这些线上使用任何阴影或其他任何东西。只需使用动画位图并移动它们。

有没有人对提高这种表现有什么好的建议？

Answer 1

如果没有看到您的代码，很难确切地知道瓶颈在哪里。但是这里有一些地方可以开始寻找（从更琐碎的修复开始）：

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进行基本补间（只是一个快速测试）。

Answer 2

尝试同时使用多个Stage个对象。