performance - EaselJS中大量动画位图的速度

Question

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

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

有人对提高这种性能有什么好的建议吗？

Answer 1

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

1. 确保您使用的是现代浏览器。至少，检查其他几个浏览器/平台，看看性能是否有任何显着变化。据我了解，EaselJS 在非硬件加速画布实现上的性能要差得多。

2. 如果可以的话，使用 createJS 的 TweenJS 版本而不是其他补间库。TweenJS 会将自己绑定到 EaselJS 的Ticker类，这样效率更高。

3. stage.update()除非绝对必要，否则不要打电话。既然stage.update()是这样一个昂贵的电话，你应该尽可能小气。事实上，如果您使用 Ticker 定期更新舞台，则根本不应该调用它。

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

5. 降低 EaselJS 检查鼠标悬停的频率。如果您在舞台上启用了鼠标悬停，请传入较低的频率（文档）。如果您不需要它（如果您只听点击），请不要启用它。监视鼠标悬停非常昂贵，尤其是如果您在舞台上有很多元素。

6. 设置stage.snapToPixelsEnabled为真。这可能有帮助，也可能没有帮助。从理论上讲，在整个像素上渲染位图效率更高，但这可能会导致一些动画变得参差不齐，而且我还没有充分了解它的其他优点和缺点。

我能够在 30FPS 下使用大约 600-800 个精灵表获得不错的性能，并在 4 岁的 iMac 上使用 Chrome 进行基本补间（只是一个快速测试）。

Answer 2

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