javascript - React.js 移动网站在 Android 上的 Chrome 中卡住

标签 javascript node.js reactjs

我们遇到了 React.js 网站无法运行的问题,特别是在 Chrome/Android 上。无法在其他浏览器或平台中复制它(桌面总是流畅)。

它似乎与首页有关,很可能与正在加载的图像数量有关。由于某种原因,其他浏览器(甚至 iOS 上的 Chrome)似乎并没有遇到困难。

我无法用一个简单的示例重新创建它,但可以在我们的开发站点 https://beta.fotmob.com 找到一个有效的、实时的示例。 ,您可以看到它在随机单击几次后卡住(使用 Android 上的 Chrome)。该网站是服务器渲染的,除了顶部的 Facebook 广告之外,所有组件都是 React 组件(针对 FB 广告代码具有危险设置InnerHTML 的 React 组件)。

关于任何类型的覆盖(特别是底部的搜索按钮或顶部的日历),还有另一个奇怪的问题:关闭搜索或选择日期是一个 touchend 事件,它似乎“粘住”,并且会然后触发下面的超链接(比赛或联赛),尽管有元标记: meta name="viewport"content="initial-scale=1, width=device-width"

点击次数没有“通过”;它们肯定会在覆盖层被移除后出现,但 300 毫秒的延迟不应再出现。无论如何,我不认为这是卡住的原因,但我认为这可能值得一提。

对于可能导致问题的原因,或者为什么它是特定于浏览器的,您有什么想法或想法吗?

编辑: 只是在这里添加解决方案,供那些不想继续阅读的人使用。

卡住问题:由多次 setTimeout 调用导致,这些调用在页面加载后修改了状态。然而,为什么它会在 Android 上的 Chrome 中引起问题仍然是个谜。也许 Android 上的 Chrome 处理状态更改或大量 JS 调用的方式有所不同。

双击问题:这似乎是 React 或 Chrome 中的错误。基本上,无论元标记如何,超链接都会在 0.3 毫秒延迟后触发,但 onClick 不会。所以 onClick 正在按预期工作。解决方法是将实际导航从 href 移至 onClick。

最佳答案

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

卡住问题:由多次 setTimeout 调用导致,这些调用在页面加载后修改了状态。然而,为什么它会在 Android 上的 Chrome 中引起问题仍然是个谜。也许 Android 上的 Chrome 处理状态更改或大量 JS 调用的方式有所不同。

双击问题:这似乎是 React 或 Chrome 中的错误。基本上,无论元标记如何,超链接都会在 0.3 毫秒延迟后触发,但 onClick 不会。所以 onClick 正在按预期工作。解决方法是将实际导航从 href 移至 onClick。

关于javascript - React.js 移动网站在 Android 上的 Chrome 中卡住,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43347654/

相关文章:

javascript - 在不同文件中拆分文件(例如 html、图像、css、js 等)时,HTML 和 CSS 是否应保留在同一域中

javascript - 上传到 Firebase 存储后,Firebase FCM 不发送图像通知

javascript - 连接具有不同编码的 javascript 文件

javascript - 我怎样才能让我的汉堡包菜单更小,并且周围有一个完美的圆形边框?

javascript - 在不同项目中导入和使用时,componentDidMount 函数不起作用

javascript - 如何停止在 node.js 中获取此 ReferenceError?

node.js - 为什么我的node.js heroku 任务console.log 语句没有显示在heroku 日志中?

node.js - 正则表达式捕获用引号引起来的逗号分隔数字

node.js - 使用 Nodejs 和 ExpressJS 进行 Flash 套接字策略

javascript - React-Admin:如何处理对象列表上的输入源