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

Question

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

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

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

Answer 1

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

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

如果可以，请使用 createJS 的 TweenJS 版本而不是其他补间库 . TweenJS 将自己绑定(bind)到 EaselJS 的 Ticker类，效率更高。

不要调用stage.update()除非绝对必要。 由于stage.update()这么贵的电话，你应该尽可能的小气。事实上，如果您使用 Ticker 定期更新舞台，则根本不应该调用它。

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

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

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

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