javascript - Createjs:向容器添加鼠标悬停会降低 FPS

Question

链接 1 - http://horebmultimedia.com/Sam3/链接2 - http://horebmultimedia.com/Sam5/

在上面的链接中，我在每个文件的单独容器中添加了一组数字，您可以在右上角找到 FPS。问题是，当我将鼠标悬停在此链接 1 上并单击任何数字时，您会看到 FPS 越来越慢，导致左侧世界旋转速度变慢。

在链接 2 上，我只添加了 1 个鼠标悬停和 5 个鼠标悬停，但 FPS 没有太大差异，为什么当我有 37 个容器时它会滞后这么多。如果您需要解决，我可以给我的代码。

Answer 1

我粗略地查看了您的代码，但是深入整个项目并不是调试优化问题的好方法。

首先要考虑的是，如果您在舞台上启用了 mouseOver，我建议在交互元素上自由使用 mouseChildren=false，并且 mouseEnabled=mouseChildren=false 任何非交互的内容。翻转可能是一个重要原因，因为它要求所有内容每秒绘制 20 次(在您的使用中)。重绘文本和矢量的成本可能很高。

// Non-interactive elements (block all mouse interactions)
element.mouseEnabled = element.mouseChildren = false;

// Interactive elements (reduce mouse-checking children individually)
element.mouseChildren = false;

如果它们没有改变，您可能会考虑缓存文本元素或按钮图形。我想我在源代码中看到了一些缓存 - 但这通常是值得考虑的一件好事。

--

话虽如此，调试优化可能很困难。如果删除所有按钮可以提高性能，请考虑按钮的构造方式以及它们的成本是多少。* 鼠标悬停价格昂贵* 矢量和文本可能很昂贵* 如果使用得当，缓存会有所帮助，但如果使用得太频繁，成本可能会很高。* 回顾一下tick() 上发生了什么。有时，代码会不断运行，但这并不需要。

--

其他一些注意事项:

• 这并不符合您的想法: _oButton.off("mousedown"); -- 您需要传递 on() 调用的结果。如果您只是进行清理，请调用_oButton.removeAllEventListeners()。

• 您不需要将光标设置在鼠标悬停上。光标仅在滚动时才会改变 - 因此只需设置一次，然后删除您的 buttonover 内容。

• 为您的自定义类扩展 EventDispatcher 可能是有意义的，它为您提供诸如 on() 方法之类的内容，该方法支持 data 参数。我可能会建议用它来代替 CTextButton

中的 addEventListener 内容
• 请注意，RAF 不支持帧速率属性(它仅使用浏览器的 RAF 速率，通常为 60fps)。使用 createjs.Ticker.timingMode 而不是已弃用的 useRAF。

希望能有点帮助。