JavaScriptのイベントキュー(event loop)


はじめに
私たちはすべて知っています.javaScriptは単一スレッドで、ブロックされていないスクリプト言語です.
シングルスレッドは、プログラム実行時に、実行されるプログラムパスが連続的に並べられ、前のものが処理されなければ、後のものが実行されないということを意味します.
どうしてシングルスレッドが必要ですか?
ブラウザスクリプト言語としてJavaScriptの主な用途はユーザーとの対話とDOMの操作です.これは単一スレッドしかないことを決定した.
ブロックではなく、コードが非同期タスク(すぐに結果を返すことができず、I/Oイベントなどの一定の時間がかかるタスク)を行う必要がある場合、メインラインはこのタスクを保留し、非同期タスクが結果を返すときは、規則に従って対応するコールバックを実行します.
では、どうやって「非閉塞」を実現しますか?
これから検討します.
二、イベントキュー(Task Que)
まず簡単な例を紹介します.
console.log(1);

setTimeout(function(){
    console.log(2);
},1000)

console.log(3)

//1
//3
//2
以上のコードで:
consolie.log(1)とconsolie.log(3)は同期コードであり、実行スタックにおいて順次実行される.
set Timeoutは非同期イベントであり、jsエンジンはそれを保留して、次の同期コードを実行し続けます.一秒後に、jsはこのイベントを現在の実行スタックとは異なる他の列に追加します.イベントキューと呼ばれます.イベントキューに入れられた場合は、直ちにそのコールバックを実行せず、現在の実行スタックのすべてのタスクが実行されるのを待って、メインスレッドがアイドル状態にある場合は、イベントキューにジョブがあるかどうかを調べる.もしあるならば、メインスレッドはその中から第1位のイベントを取り出して、このイベントに対応するコールバックを実行スタックに入れて、その中の同期コードを実行します.
三、マクロタスク(macro task)とマイクロタスク(micro task)
非同期タスクの間には異なるので、彼らの実行優先度にも違いがあります.異なる非同期タスクは、マイクロタスクとマクロタスクの2つに分類される.
マクロタスク(macro task)は、JS内部のtaskとDOMタスクを秩序よく実行できるようにするために、一つのtaskで実行が完了したら、次のtask実行が開始される前に、ページを再レンダリングします.マウスクリックすると、一つのイベントのコールがトリガされます.マクロタスクを実行して、HTMlを解析します.
マイクロタスク ),マイクロタスクは、通常は、一連の動作にフィードバックするか、または非同期の実行タスクが必要であり、新しいtaskを割り当てる必要がないので、性能の小さなオーバーヘッドを減らすことができます.すべてのマイクロタスクは、次のマクロタスクの前にすべて実行されます.
以下のイベントはマクロタスクに属します.
  • setInterval()
  • setTimeout()
  • 以下のイベントはマイクロタスクです.
  • new Promise()
  • new MutaionObserver()
  • process.nextTick