EaselJS中大量动画位图的速度

Question

我在使用EaselJS时，似乎有些困难处理大量动画位图（都基于同一精灵表）。当我将其中几个同时放置在舞台上时，没有任何问题，但是当我同时运行更多数量的位图（从30到40开始）并将它们移动时，我开始看到它们频繁“闪烁”，即使帧速率约为10。 我没有使用任何阴影或其他类似的效果，只是在使用动画位图并移动它们。 有没有人有关于提高性能的好建议呢？

- Kristof

Answer 1

没有看到您的代码，很难确定瓶颈在哪里。但以下是一些开始查找的地方（从更琐碎的修复开始）：

1. 确保您使用的是现代浏览器。至少跨越几个其他浏览器/平台来检查性能是否有重大变化。据我所知，在非硬件加速的画布实现中，EaselJS的性能显着较差。

2. 如果可以，请使用createJS版本的TweenJS而不是其他tweening库。 TweenJS将绑定到EaselJS的 Ticker类，这更高效。

3. 除非绝对必要，否则不要调用stage.update()。由于stage.update()是如此昂贵的调用，因此您应该尽可能吝啬。实际上，如果您正在使用Ticker定期更新舞台，则根本不应该调用它。

4. 聪明地且积极地缓存。如果舞台上有复杂的静态元素，则缓存它们将节省一些周期。但是，缓存也有开销，因此请将其保存在具有许多静态元素或复杂绘制形状的容器中。

5. 降低EaselJS检查mouseover的频率。如果您已启用舞台上的mouseover，请传递较低的频率（文档）。如果不需要它（如果只监听点击），则根本不要启用它。监视mouseover非常昂贵，特别是如果舞台上有大量元素。

6. 将stage.snapToPixelsEnabled设置为true。这可能会有所帮助，也可能没有。从理论上讲，在整个像素上渲染位图要比部分像素更有效，但是这可能会导致某些动画变得锯齿状，我还没有进行足够的测试，了解其他的优缺点是什么。

我在一台4年前的iMac上使用Chrome进行了一个快速测试，使用大约600-800个精灵表和基本的补间动画，可以以30FPS的性能运行。

- jalbee

Answer 2

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

- akonsu

---

并没有真正加速性能，因为它仍然需要同时绘制相同数量的动画精灵。 - Kristof

你在每个舞台上使用了不同的画布元素吗？ - akonsu