javascript - Javascriptで長時間実行される計算を行うときにブラウザがフリーズしないようにする方法

Question

関数内のJavaScript計算が完了するまでに時間がかかり、ページがフリーズするWebページがあります。計算がバックグラウンドで行われているときにjavascriptがブラウザをフリーズしないようにするには、どのような手法を使用する必要がありますか？

Answer 1

計算を行うだけで、長時間の計算中にDOMにアクセスする必要がない場合は、次の2つのオプションがあります。

1. 計算を細かく分割して、で一度に1つずつ実行できますsetTimeout()。呼び出しのたびsetTimeout()に、ブラウザは他のイベントを自由に提供し、ページを存続させ、応答性を維持します。計算の最後の部分が終了したら、結果を実行できます。
2. 最新のブラウザでWebworkerを使用して、バックグラウンドで計算を実行できます。Webworkerで計算が行われると、メインスレッドにメッセージが返され、その結果でDOMを更新できます。

例も示す関連する回答は次のとおりです。UIをブロックせずに配列を反復処理するための最良の方法

Answer 2

一部のブラウザーには、コードを実行してUIを更新するためのスレッドが1つしかありません（つまり、計算が完了するまで、ブラウザーは「フリーズ」して表示されます）。何らかの方法で、アクションを非同期で実行することをお勧めします。

計算に非常に費用がかかる場合は、サーバーを呼び出してサーバーに計算を行わせ、計算が完了したらクライアントにコールバックすることをお勧めします。

計算に費用がかかる場合は、クライアントでチャンクで計算を試みることができます。これは実際には非同期ではありませんが（クライアントは各チャンクの実行中にブロックするため）、目標は、ブロックが目立たないようにチャンクを十分に小さくすることです。