移动 Android Chrome 不适用于 HTML5 和 CREATEJS - 冻结问题答案

【问题标题】：Mobile Android Chrome not working great with HTML5 and CREATEJS - freezing issues移动 Android Chrome 不适用于 HTML5 和 CREATEJS - 冻结问题
【发布时间】：2020-02-06 03:17:35
【问题描述】：

我使用 HTML5 和 CREATEJS 开发了一个应用程序。我遇到了几个星期以来我找不到解决方案的一些问题。我希望有人能帮帮忙。

1) 在 Android Google Chrome 上，当我点击屏幕上的任意位置时会出现一个问题：FPS 下降并且任何正在播放的动画在我触摸期间冻结。问题仅存在于 Android 上的移动 Chrome 浏览器中。它不存在于其他移动浏览器中，也不存在于 iPhone 中，也不存在于 Safari、Firefox 等中。我使用 webview 创建了一个简单的 apk，它也没有问题。因此，由于某种原因，问题仅出现在移动 android chrome 中。

代码被最大限度地优化。 2 个月前我们只使用了 1 个画布，但现在我们使用了多个画布，并且每次运行的每个画布中的动画都更少了。虽然在 android firefox 中它可以完美运行，但在 android chrome 中它会因为单击而冻结。

我尝试禁用 stagemousedown/up 事件，因为当我只需单击舞台中的任意位置时它们就会被触发。这没有解决问题，或者可能存在一些我不知道如何禁用的隐藏 stagetouch 事件。

2)在Android Google Chrome 和iPhone6 Safari 上，当我点击SPIN 按钮时，游戏开始SPIN，但延迟至少1.5 秒，但代码内部没有故意添加这种延迟。在 PC 上的任何浏览器，Android/iOS Mobile Firefox，这都完美无缺，没有延迟。在 iOS Safari iPhone8 中，它再次完美运行。我使用 webview 创建了一个简单的 apk，它也没有这个问题。因此，出于某种原因，问题仅存在于移动 android chrome 中。 2019 年 11 月 10 日更新：问题 2 已通过减小画布大小和删除所有消耗大量内存的阴影效果来解决。问题 1 仍然没有解决，完全没有想法可以尝试。任何帮助表示赞赏。

除了这两个问题外，我的项目已完成 99%。我希望能够修复它们，因为我真的不想放弃几个月的工作并切换到其他没有问题的 javascript 库进行游戏，比如 PIXIJS。

我尝试使用 RAF 和 RAF_SYNCHED，但在任何情况下都没有改进。任何动画都需要 Stage.update()。让它们出现在股票行情上是它变慢的原因。

要查看实际问题，请打开此 URL：http://www.nevergone.biz/DEMO_CODE/index.html

如何测试：在 Android Google Chrome 纵向模式下打开上面的链接，然后单击 SPIN。在旋转期间单击游戏画布上方或任何地方。请注意，一切都冻结了。

提取代码仅用于测试这些问题，因此在几次旋转后它可能会冻结。我明天会解决这个问题，但我希望有人能提供一些解决问题的想法。

【问题讨论】：

也许使用实际的 html5 游戏引擎来开发您的游戏。似乎只是优化问题
第一点对我来说在版本 77.0.3865.120（官方构建）（64 位）中运行良好
@ArulMani 你用的是什么设备？

标签： javascript android html html5-canvas createjs

【解决方案1】：

问题 #1 在一些使用 Android Google Chrome 的旧设备上显然是孤立的。这个问题是由 CREATEJS 在 stagedown 事件中使用太多侦听器引起的。我目前正在等待框架的开发人员给出答案或 Chrome 收到严重的更新。

问题 #2 已通过删除所有明显消耗大量内存的 text-shadow CSS 效果得到解决。

【讨论】：

是 CreateJS “使用了太多的监听器”，还是你的代码？这是指这个问题吗？ bugs.chromium.org/p/chromium/issues/detail?id=1010022
@Lanny 问题是一样的。我不认为这是来自我的团队开发的个性化代码。 CreateJS 如何侦听触摸事件与 Android 上的 Chrome 如何处理它们之间存在一些不兼容。在 iOS 上，问题不存在，因为在 iOS 上 Chrome 使用 Webkit。我们还为 Android 制作了一个 Webkit 应用程序，问题也不存在。在 Android Firefox 中，它也不存在。因此，为了隔离问题，似乎是 Blink 引擎（由 Chrome 使用）和 CreateJS 之间不兼容。我还在 Android Chrome 上测试了使用 Pixi 开发的复杂项目，没有问题。

【解决方案2】：

缓存可能会起作用。

var testShape=new createjs.Shape(); 
testShape.graphics.beginFill("red").rect(0,0,100,100);
testShape.cache(0,0,100,100);
stage.addChild(testShape); 

// If you make changes and want to refresh the cache
testShape.updateCache()

【讨论】：