JavaScriptシングルスレッドと非同期

シングルスレッドおよび非同期Event Loop
1.単一スレッド
シングルスレッドとは?非同期と何の関係があるの?
単一スレッド:同じ時間に1つのことしかできません.
単一スレッドを使用する理由
DOMレンダリングの競合を回避するために.(ブラウザはDOMをレンダリングする必要があるので、JSはDOMを修正することもできます.1つのレンダリングノードはもう1つのノードを削除しました.それはいったいどうしますか)
HTML 5はwebsorkerがマルチスレッドをサポートすることを提案しているが,DOMにもアクセスできないという点でもこの説を検証している.
(JS実行ブラウザDOMレンダリング一時停止)つまり、JS実行の優先度はブラウザレンダリングの2つのJSよりも高く、同時に実行できない(いずれもDOMを変更すると競合する)
シングルスレッドの問題
単一スレッドは、すべてのタスクがキューに並ぶ必要があることを意味し、次のタスクを実行し続けるには1つのタスクを実行しますが、前のタスクが長い場合は、後のタスクはずっと待つ必要があります.
次の例は、単一スレッド同期の操作です.最初から最後まで実行する必要があります.

//       
var i,sum = 0;
for(i = 0; i < 100000000; i++){
  sum += 1;
}
console.log(sum)
//alert
alert(1);
console.log(2);
alert(3)

並んでいるのは計算量が多いため、CPUが忙しくて手が回らないので、まあいいのですが、多くの場合CPUは暇で、IOデバイス(入出力デバイス)が遅いので(例えばAjax操作でネットワークからデータを読み取る)、結果が出るのを待ってから下へ実行しなければなりません.
2.ソリューション-非同期
まず非同期を見てみましょう.私たちがよく使うsettimeout、setInterval、ajaxリクエストは非同期操作に属しています.
プライマリ・スレッドは、I/Oデバイスに関係なく、待機中のタスクを保留し、後ろに並んだタスクを先に実行できます.IOデバイスが結果を返すまで、振り返って、保留中のタスクを実行し続けます.

console.log(100)
setTimeout(function(){
    console.log(200)
  },1000)
$.ajax({
  url:'./demo.js',
  success: function(result){
    console.log(result)
  }
})
console.log(300)
//100
//300
//200      

非同期はどのように実現されますか?
JSのすべてのタスクは、同期タスクと非同期タスクの2つに分けることができます.
タスク全体の実行メカニズムは次のとおりです.

は、すべての同期タスクをメインスレッド上に配置し、実行スタック

を形成する.

は、すべての非同期タスクを一時停止し、条件に達すると「タスクキュー」(イベントのリスニング、イベントのトリガー)

に格納する.

メインスレッド上のすべての同期タスクを実行すると、システムは「タスクキュー」にそれらのタスクがあることを表示し、非同期タスクは待機状態を終了し、実行スタックに入り、

の実行を開始する.

システムは、メインスレッドとタスクキューの間で、上記の第3ステップ

を繰り返しポーリングする.
3.Event Loop
メインスレッドは「タスクキュー」からイベントを読み込み、ループを繰り返すプロセス全体をEvent Loop(イベントポーリング)と呼びます.
上記のステップ3について説明します.
メインスレッド上のすべての同期タスクが実行すると、システムは、非同期タスクが終了する待機状態で、実行スタックに入り、実行を開始する.(スタック内のコードは、「タスクキュー」に様々なイベント(click,load,done)を追加する様々な外部APIを呼び出す.スタック内のコードの実行が完了すると、メインスレッドは「タスクキュー」を読み出し、それらのイベントに対応するコールバック関数を順次実行します)

console.log(100)
setTimeout(function(){
    console.log(200)
  },1000)
console.log(300)

それともこの例ですか:settimeoutは1秒で(条件に達した)タスクキューに入れられ、システムにポーリングされ、メインスレッドに投げ込まれて印刷を実行します.
非同期の欠点を述べる

は書き方に従って実行する、可読性が悪い

である.

callbackモジュール化が容易でない

これも後のES 6規格が正式に提案されたPromiseが敷き詰められています
延長読書:[チェン一峰先生のJavaScript運行メカニズム詳細:Event Loopについて]http://www.ruanyifeng.com/blog/2014/10/event-loop.html