JavaScriptでタイムスライスはどうやって起こりますか？

Question

またはecmascriptですが、実際にどのように起こるかは正確なインプリメンテーションによりますか。

javascriptは技術的にはシングルスレッドです。

が、私は

$myDIv.animate({ 
    height:"100px" 
}); 

ような何かを行う場合、私はであるため

A.

$myDIv.animate({ 
    height:"100px" 
}, null, my_cpu_heavy_function); 

またはB.

$myDIv.animate({ 
    height:"100px" 
}); 
my_cpu_heavy_function(); 

をすればそれはどんな違いを生むん第2のアニメーションはあなたにCPUの重い機能で処理時間のために戦っているので、アニメーションの外観が苦しむだろうか？

JavaScriptは同期ブロックの最後で実行を停止するか、任意のポイントで1ブロックを切断して、非同期に実行される別のブロックを処理できるようにしますか？

Answer 1

それは私がAまたはB

を行う場合は、[はい、それは違いを生むだろう任意の違いを生むことがありません。

2番目のバージョンでは処理時間があまりありません。 my_cpu_heavy_functionは、一度開始するとすべての処理時間を占有するようになります（同期していると仮定します）。

つまり、同期コードのビットが開始されると、実行がスケジュールされる予定の非同期コードに関係なく、完了するまで同期コードは終了しません。非同期コードは、同期コードが完了するまで常に強制的に待機します。

アニメーションが開始され、初期化が実行されますが、my_cpu_heavy_functionがすぐに開始され、アニメーションが完了するまで残りの部分がブロックされます。

Answer 2

javascriptにタイムスライスがありません。 Javascriptはシングルスレッドです（ここでは議論していないWebワーカーを除く）。完了するまで、javascript実行の1つのスレッドが実行されます。

最初のコード例では、アニメーションはその処理を行い、完了したらmy_cpu_heavy_functionを呼び出します。

2番目のコード例では、アニメーション自体が初期化され、最初のアニメーションステップのタイマーが設定されます。それから、次のコード行に戻ります。アニメーションは始まったばかりです（そして、将来的に少し時間を置いてタイマーを設定してください） - 完了していません。その後、あなたのmy_cpu_heavy_functionが実行され、実行されるまで、JavaScriptの実行全体がホッグされます。 my_cpu_heavy_functionが実行中にアニメーションがまったく実行されません。終了すると、アニメーションセットが起動するタイマーイベントとアニメーションが実行されます。

アニメーションはタイムスライシングのように見えるかもしれませんが、実際にはありません。 jQueryアニメーションはアニメーションの一歩を踏み出し、その後少し時間をかけてタイマーを設定し、システムに戻ります。そのタイマーイベントが発生すると、jQueryはアニメーションの次のステップを実行します。タイマーイベントが発生すると、それはタイマーイベントをjavascriptイベントキューに入れます。現在実行中のjavascriptがない場合、タイマーコールバックはすぐに開始されます。 javascriptが現在実行されている場合、タイマーイベントは、現在のjavascriptスレッドが終了するまでイベントキュー内に置かれます。そのスレッドが終了すると、javascriptはイベントキュー内を調べて、待機中のイベントがあるかどうかを確認します。存在する場合、イベントコールバックを呼び出します。

このように、実際にはJavaScriptのさまざまな部分のための時間スライスはありません。実行したい2つのコードは、ネイティブコードの実際のスレッドで発生するようなCPUサイクルがあるとは限りません。 javascriptでは、コードが完了するまで1つのコードが実行され、次のイベントを開始することができます。 JavaScriptベースのアニメーションのようなものでは、細かい作業を行い、将来の時間にタイマーを設定してシステムに戻すことで、タイムスライスをいくらかシミュレートできます。実行が終了すると、他のjavascriptも実行できますが、実行されるまで実行されます。 javascriptのすべての部分が小さな仕事をして、次の作業のためのタイマーを設定すれば、彼らはすべて協力して時間切れのように表示されますが、それらのすべての協力のためにのみ機能します。 my_cpu_heavy_functionのような1つの機能がCPUをしばらく待ち続けると、その間に誰も実行されません。 my_cpu_heavy_functionが実行されている間、アニメーションは停止します。

ブラウザの一部の操作は、ブラウザのネイティブコード（ajax呼び出し、画像の読み込みなど）によって実行されます。これらの非同期タスクは、javascriptの実行中はバックグラウンドで処理できますが、javascriptの実行中のスレッドが終了し、通知コールバックを持つ新しいスレッドが開始されるまで、javascriptには通知されません。

例として、ロードに1秒かかるイメージと、実行に5秒かかるCPU集中型の機能があるとします。私たちは、このコードを持っている：

var img = new Image(); 
img.onload = function() { 
    alert("image is loaded now"); 
} 
img.src = "xxx.jpg"; 
longFunctionThatTakesFiveSecondsToRun(); 

我々は画像をブラウザだけで内部的にロードするために1秒を要するにもかかわらず、このコードを実行するとlongFunctionThatTakesFiveSecondsToRun()は5秒後に実行して完了するまで、onloadハンドラが呼び出され得ることはありません。 onloadイベントを処理する前に、現在の実行スレッドが完了するまで待機する必要があります。

あなたはこれらの関連の回答を参照してください、JavaScriptのイベント・キューと非同期操作についての詳細をお知りになりたい場合：

How does JavaScript handle AJAX responses in the background?

Race conditions with JavaScript event handling?

Can JS event handlers interrupt execution of another handler?

Do I need to be concerned with race conditions with asynchronous Javascript?