React.js手机网站在Android上的Chrome中冻结

Question

我们遇到了React.js网站的问题，特别是在Chrome/Android上。无法在其他浏览器或平台上复制它（桌面始终平滑）。

它看起来与头版有关，很可能是正在加载的图像数量。出于某种原因，其他浏览器（甚至iOS上的Chrome）似乎并没有与之相抗衡。

我一直没能有一个简单的例子来重建它，但工作，活生生的例子可以在我们开发站点https://beta.fotmob.com，在这里你可以看到，它一对夫妇随机点击（在Android上使用Chrome后，冻结被发现）。该网站是服务器呈现的，所有组件都是React组件，除了顶部的Facebook广告（对于FB广告代码，React组件具有dangerouslySetInnerHTML）。

关于任何类型的覆盖（底部的搜索按钮或顶部的日历，具体而言）还有另一个奇怪的问题：关闭搜索或选择日期是触发事件，似乎“粘”然后将触发的超级链接的下方（或匹配联盟），尽管元标记： 元名称=“视口” CONTENT =“初始级= 1，宽度=设备宽度”

的点击次数没有增加“通过”;他们肯定是在叠加层被删除后出现的，但300ms的延迟不应该再出现。无论如何，我不认为这是冻结的原因，但我认为这可能值得一提。

对于可能导致问题的原因或为什么它是浏览器特定的任何想法或想法？

编辑： 只需在这里添加解决方案，对于不想继续阅读的人来说。

冻结问题：由加载页面后修改状态的多个setTimeout调用引起的。但是，为什么它会在Android上的Chrome中引发问题仍然是一个谜。 Android上的Chrome可能会处理状态更改或大量JS调用。

双击问题：这似乎是React或Chrome中的一个错误。基本上，超链接是在0,3ms延迟后触发的，不管元标记如何，但onClick不是。所以onClick按预期工作。解决方法是简单地将实际的导航从href移动到onClick。

Answer 1

我设法解决了这两个问题。

冻结问题：由加载页面后修改状态的多个setTimeout调用引起的。但是，为什么它会在Android上的Chrome中引发问题仍然是一个谜。 Android上的Chrome可能会处理状态更改或大量JS调用。

双击问题：这似乎是React或Chrome中的一个错误。基本上，超链接是在0,3ms延迟后触发的，不管元标记如何，但onClick不是。所以onClick按预期工作。解决方法是简单地将实际的导航从href移动到onClick。