のsetTimeout速く

Question

私は配列に多くの値をプッシュする必要がアプリケーションを持っているので、私は、実行時間をテスト：

var st = new Date().getTime(); 
var a = []; 
for (var i = 0; i < 20971520; i++) { 
    a.push(i); 
} 
var ed = new Date().getTime(); 
console.info((ed - st)/1000); 
console.info(a.length); 

私は直接FirefoxのコンソールとChromeコンソールでコードを実行しますそれは37 secondsです。実行中はマウスでさえもChromeで移動できますが、インタラクティブな効果はありません。

その後、私はコードを変更：

function push() { 
    var st = new Date().getTime(); 
    var a = []; 
    for (var i = 0; i < 20971520; i++) { 
    a.push(i); 
    } 
    var ed = new Date().getTime(); 
    console.info((ed - st)/1000); 
    console.info(a.length); 
} 

var tr = setTimeout(push, 50); 

簡素化は、それが0.844 secondの費用がかかり、関数内のコードを入れて、setTimeoutを使用してそれを呼び出します。そして実行中に、私はChromeで正常に操作できます。

ここで何が起こっているの？

私はsetTimeoutがブラウザにUIジョブを実行するためのコントロールを置くことを知っています。これによりページが応答しやすくなります。たとえば、私はページのmousemove中にいくつかの計算を行うとき、私はそれがUIをブロックしないように遅延実行された計算を入れます。

しかし、なぜ同じコードの実行時間が短縮されるのでしょうか？

Answer 1

実行中、Chromeで正常に操作できます。

メインのクロムウィンドウは、他のケースとちょうど同じくらい凍結されます。デバッグツールは別のスレッドであり、速度は落ちません。

しかし、なぜ同じコードの実行時間が短縮されるのでしょうか？

開発ツールで実行するとします。 VMがプロパティの最適化を行うことができる実際にコードを実行すると、時間は同等です（ほぼ1秒）。例えば

var st = new Date().getTime(); 
    var a = []; 
    for (var i = 0; i < 20971520; i++) { 
     a.push(i); 
    } 
    var ed = new Date().getTime(); 
    console.info('normal', (ed - st)/1000); 
    console.info(a.length); 

    function push() { 
     var st = new Date().getTime(); 
     var a = []; 
     for (var i = 0; i < 20971520; i++) { 
      a.push(i); 
     } 
     var ed = new Date().getTime(); 
     console.info('timeout', (ed - st)/1000); 
     console.info(a.length); 
    } 

    var tr = setTimeout(push, 0); 

http://jsfiddle.net/gu9Lg52j/あなたはnormalがsetTimeoutと同じくらい速いを実行表示されます。

function push() { 
     var st = new Date().getTime(); 
     var a = []; 
     for (var i = 0; i < 20971520; i++) { 
      a.push(i); 
     } 
     var ed = new Date().getTime(); 
     console.info('timeout', (ed - st)/1000); 
     console.info(a.length); 
    } 
    push(); 

Answer 2

すべてのJavaScriptエンジンで実行：あなたは関数内のコードをラップし、コンソールで実行した場合、VMは、関数の定義と実行の間の最適化を行うことができますよう

また時間がさえsetTimeoutせずに匹敵しますさまざまな最適化。たとえば、V8では2つのコンパイラが使用されます。コンパイラはデフォルトで使用される単純なものと最適化されたものです。最適化コンパイラによってコンパイルされないコードは遅い、非常に遅いです。

最適化コンパイラを実行する条件は、コードが長すぎない関数（there are other conditions）でなければならないという条件です。コンソールで試した最初のコードは関数ではありません。あなたの最初のコードを関数に入れると、それは2番目のコードと同じコードを実行することがわかります。setTimeoutは何も変わりません。

主なパフォーマンス要因が最適化コンパイルの場合、コンソールでのパフォーマンスをチェックするのは無意味です。ノードをターゲットにしている場合は、ベンチマークフレームワークを使用します。ブラウザをターゲットにしている場合は、jsperfのようなサイトを使用します。

ブラウザで実際に長い計算をしなければならない場合（ここではそうではないようです）、バックグラウンドスレッドのジョブをUIに影響させないように、using web workersを考慮する必要があります。

Answer 3

両方のコードをほぼ同じ速度で実行する必要があります（後者の例は高速ですが、10倍高速ではありません）。

Chromeデベロッパーツールの中には、別の話があります。式はwithブロック内で評価されます。つまり、aとiなどの変数は、別のオブジェクト（__commandLineAPI）内で最初に検索されます。これにより、オーバーヘッドが追加され、実行時間が10倍長くなります。

Answer 4

setTimeoutは、他の人が気づいたように、アレイの作成を高速化しません。はにブラウザをロックします。配列の作成中にブラウザのロックアップが心配な場合は、Webワーカー（MDNを参照）が救助になるかもしれません。あなたのコードにウェブワーカーを使用しているjsFiddleデモがあります。ワーカーコードはhtml内にあります：

onmessage = function (e) { 
    var a = [], now = new Date; 
    for (var i=0; i<20971520; i++) { 
    a.push(i); 
    } 
    postMessage({timings: 'duration: '+(new Date()-now) + 
         'Ms, result: [' + a[0] + '...'+a[a.length-1] + ']'}); 
}