どのようにこのJavaScriptコードのCPU使用量を減らすには？

Question

現在、私はいくつかのjsコードを最適化しています。
appendXYZという名前の関数があり、それは他の関数を持つループで呼び出されます。
それは次のように次のようになります。

function OuterFunc(){ 
    for(...){// about 150 times 
    ... 
    appendXYZ(); 
    //other dependent functions 
    ... 
    } 
} 

、今私はappendXYZが高いCPU使用率を引き起こすことをかなり確信している - 、それは50％に達することができる
が、私はこの機能を削除した場合、CPU使用率が唯一の1であります％。
CPU使用率が50％の場合、ブラウザはほぼフリーズしており、ページは応答性がありません。
さらに、OuterFuncは20秒ごとに実行され、appendXYZはサードパーティのスクリプトコードからのものです。変更することはできません。
このコードを最適化するにはどうすればよいですか？

今、私はsetTimeoutを使用しようとしていますが、動作しているかどうかはわかりません。

Answer 1

私はその関数が何をしているのか分かりませんが、その呼び出しを非同期にすることができます。

動作しても動作しなくても、同じ量のCPUが必要ですが、少なくともブラウザを少しでも解放する必要があります。

function OuterFunc(){ 
    for(var i = 0; i < 150; i++){ 
    // ... 
    setTimeout(appendXYZ, 0); 
    //other dependent functions 
    // ... 
    } 
} 

これもやはり機能を破壊する可能性があります。より多くのコードを見ることなく伝えることはできません。

あなたは引数を渡している場合は、あなたが何か必要があると思います：

function invoker(j) { 
    return function() { 
     appendXYZ(j); 
    }; 
} 

function OuterFunc(){ 
    for(var i = 0; i < 150; i++){ 
    // ... 
    setTimeout(invoker(i), 0); 
    //other dependent functions 
    // ... 
    } 
} 

Answer 2

可能性がOuterFunc実行時間が、それは繰り返し間隔だということも大きいということです。言い換えれば
は、OutherFuncは、それが無限ループで実行するのです終了前に、関数が呼び出されているので、それはstackoverflow例外が生成されます実行するために20秒以上かかり、20秒ごとに呼び出されています。
あなたは20秒ごとにOuterFunc機能を実行するためにsetIntervalを使用している場合、これはsetInterval機能をシミュレートするsetTimeout呼び出しを用いて固定することができますに：

(function helper(){ 
    OutherFunc(); 
    // after the OutherFunc is done executing, trigger it after 20 seconds 
    setTimeout(helper,20); 
})(); 

これはsetIntervalがの原因である場合にのみ、あなたを助けるかもしれませんブラウザフリーズ。
この方法で問題が解決しない場合や、古いブラウザについて気にしない場合は、「スレッディング」のようなものをweb-workersを使って実装できます。このようにして、あなたのコードは別のスレッドで実行され、あなたのアプリケーションを確実に高速化します（a.k.aバイバイブラウザのフリーズ）。

希望すると便利です。

Answer 3

実際のコードを最適化するために何もできない場合は、ループ反復の実行を中心に広げて、ブラウザを応答してください。 Robert Miller's paperによれば、UIを保持してもユーザーに反応すると感じる最大時間は100ミリ秒です。 setTimeoutを使ってこれを行う方法については、UI responsiveness and javascriptを参照してください。