React、Redux、React Router で構築されたかなり大きな webapp があります。Chrome で開発ツールを開くまで問題なく動作し、100 倍で著しく遅くなります。Chrome でアプリのプロファイリングを試みましたが、Chrome を使用して再度プロファイリングを開始すると、開発ツールを閉じた場合と同じくらい速く動作し始め、すべて問題ありません。
Safari と Opera もチェックしました - それらの開発ツールも webapp を遅くします。React/Chrome がパフォーマンスに大きく影響するのはなぜですか? React を誤用しているということですか、それとも React+Chrome によくある問題ですか? 回避策はありますか？
今日気づいたことの 1 つは、React Tools 拡張機能が React アプリのパフォーマンスに大きな影響を与える場合があることです。拡張機能の目的は React コンポーネントのリアルタイム ビューを提供することであるため、ページが変更されるとその表現を更新しようとし、いくつかの重大な変更では遅延が追加されます。
私の場合、列ヘッダーをクリックしてソートできる〜650行のテーブルがあります。開発ツール ペインを開かないと、すべてが非常にスムーズに動作します (ページは 1 秒以内に更新されます)。ただし、開発ツールを開いて [React] タブに切り替えると、タブ全体 (ページと開発ツール ペインの両方) がクリックに応答しなくなります。テーブルの並べ替え後 3 ～ 4 秒。