ブラウザー ウィンドウでいくつかの計算を実行したいのですが、特にシングル コア マシンの場合、ユーザーの操作のためにクライアント コンピューターの速度が低下することは望ましくありません。マシンの応答性を損なうことなく、可能な限り高速に実行されるように、実行中の JavaScript のナイス レベルを調整する方法はありますか?
5 に答える
開ループを作成...例
これはクローズループです
for( i = 0 ; i < 10000 ; i++)
{
doSomeMath(i);
}
これは開ループです
i = 0;
iMax = 10000
var MyWorkingThread =
setInterval(function()
{
if( i < iMax)
{
doSomeMath(i);
i++;
}
else
{
clearInterval(MyWorkingThread);
}
},1);
開ループ内でより多くの、またはより少ない作業を行うことができますが、これは一般的な考え方です。私は同様の問題のためにこれを何度も作成しましたが、ブラウザは非常にスムーズに動作しました。
計算の実行を遅らせる以外に考えられません。たとえば、すべての作業を小さな断片に分割し、各タスク間で少し遅延して (setTimeout
またはを使用して) 順番に実行します。setInterval
速度を上げるために、単一の多次元配列を使用してデータを格納し、関数の最後で単一の結合を使用してその配列を出力用の文字列に変換し、innerHTML メソッドを使用してそのデータを出力します。これは、JavaScript でデータを格納して提供する最速の方法です。DOM のメソッドや要素を使用してデータを出力すると、約 4 倍遅くなるため、絶対に使用しないでください。
データの出力回数はできるだけ少なくしてください。これは、関数の実行に使用するイベントによって決定されます。ページの初期読み込み時間が遅くなるため、onload イベントを使用しないことをお勧めします。ボタンに関連付けられた onclick 関数を使用することをお勧めします。これにより、ユーザーはページの速度を低下させている実行を引き起こしたことに気付くためです。
私はいくつかのテストを行いましたが、ブラウザが適度に応答するためには、作業のバーストの間にかなりの時間が必要です。
function work(cnt) {
// do some heavy work
for (var i=0;i<100000000;i++) ;
// start next work
if (cnt > 0) {
window.setTimeout(function(){work(cnt-1);},200);
}
}
- ajaxリクエストを使用してサーバー上で計算を実行します
- 新しいウィンドウまたはフレームを開き、そこでコードを実行します
- 間隔に分割されたループでコードを実行する
- Web ワーカー プロセス (html5 非同期スクリプト) を使用する準備ができていること