AndroidのChromeでReact.jsモバイルサイトがフリーズする

Question

特にChrome/AndroidのReact.jsサイトに問題があります。他のブラウザやプラットフォームではレプリケートできませんでした（デスクトップは常にスムーズです）。

一見フロントページに関連しています。イメージの読み込み量が多いようです。なんらかの理由で、他のブラウザ（iOSのChromeも）は苦労していないようです。

私は簡単な例で再作成できませんでしたが、実用的な実例はdevサイトhttps://beta.fotmob.comにあります。そこでは、数回のランダムなクリック後にフリーズすることがわかります）。サイトはサーバレンダリングされ、すべてのコンポーネントは、Facebook広告を除いたReactコンポーネント（FB adコードの場合はdangerouslySetInnerHTMLのReactコンポーネント）以外のコンポーネントです。

オーバーレイの種類については、別の奇妙な問題があります（具体的には、下部の検索ボタンまたは上部のカレンダー）。検索を終了するか、日付を選択するのが「スティック」と思われるtouchendイベントです。次いで、メタタグにもかかわらず、下（一致またはリーグ）ハイパーリンクをトリガする： メタ名=「ビューポート」コンテンツ=「初期スケール= 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に移動することです。