イベントループ

JavaScriptは単一のThread言語です->1つのcallスタックしか存在しません->一度に一つだけ処理する

非同期。

しかし、JavaScriptで実現されたWebは、同時に処理されていることは明らかです.→rightarrow→イベントループ.イベントループはJavaScriptエンジンではなく、ブラウザまたはノードにあります.jsで処理します.

JavaScriptエンジン

JavaScriptエンジンは、JavaScriptコードを実行するプログラムまたは仲介プログラムです.典型的な例はGoogle V 8エンジンです.(Chrome、Node.jsで使用)

JavaScriptエンジン動作

HTML解析器は、HTMLソースで<Script>タグに遭遇します.

javascriptソースコードがパケット化されます.→rightarrow→ノードを作成します.

データを使用してAST(抽象構文ツリー)

を作成

ASTは、小さなプログラムによってバイトコード(仮想マシンで理解可能)

に変更された.

最適化共通構文コンパイル→rightArrow→最適化コードタッチ

ASTを使用してバイトコード→rightArrow→共通構文を最適化コードを生成し、これら2つの構文をCPU

に正しく渡す.

じっこうじかん

ソース

コールスタック

実行順序を記憶する資料構造.関数を実行するには、スタックに関数を入れ、実行が完了したらスタックから削除します.

コールバックキュー

JavaScriptランタイム環境で処理するコマンドを一時的に格納するキューで、非同期実行のコールバック関数を格納します.
コールバックキューは1つしかないように見えますが、実際には複数から構成されています.

タスクキュー:settimout、setInterval、setImmediate、RequestAnimationFrame、I/O、UIレンダリングなどがコールバック関数として追加されます.

Microtask Queue: process, nextTick, Promise, Object.observe, MutationObserver

アニメーションフレーム:

コールバックキュー優先度

Microtask Queue < Animation Frames < Task Queue

実行例

サンプルコードの表示

console.log('hi');

setTimeout(function(){
	console.log('there');
},5000);

console.log('JSConfEU');

この操作を行うと、hi→右矢印→there→右矢印→(5秒後)JSCOFEUが出力します.
まず、呼スタックconsole.log('hi')に入り、次いでsetTimeoutに入り、次いでconsole.log('JSConfEU')になる.
ここでsetTimeoutは、ブラウザが提供するAPIである.(javascriptを実行するランタイム環境に存在する独立したAPI)ブラウザにおける数setTimeoutの5秒.これは、setTimeoutの呼び出し自体が完了したことを意味し、スタックから関数を削除することができます.それでは最後に残りのconsole.log('JSConfEU')は運行終了です.
これでスタックが空になり、webapiのsetTimeoutしか残っていません.Webapiでタイマの実行が完了したら、テクノロジーキューにプッシュします.活動サイクルは簡単なことをします.ロールは、コールスタックとテクノロジーキューに注目します.callスタックが空の場合、テクノロジーキューの最初のcallbackスタックをスタックで実行できます.スタック実行および削除関数.

追加)

問題が発生した場合はsettimeout 0で解決します.これは無意味な行為のようですが、スタックを待機させるためです.(スタックが空の場合のみイベントループを入れる)
しかし,複数のsettimeoutが蓄積されると,技術キューに待機が蓄積されるため,正確な時間は保証されない.逆に、最も短い遅延時間しか指定できません.
AJAXリクエストも、Javascript実行時ではなくブラウザwebapi上で実行されます.ここで実行すると、JSエンジンの呼び出しスタックで他のコードを正常に実行できます.

[1,2,3,4].forEach(function(i){ //---1번
	console.log(i);
});

function asyncForEach(array,cb){ //----2번
	array.forEach(function(){
    	setTimeout(cb,0);
    })
}

asyncForEach([1,2,3,4], function(i){ 
	console.log(i);
})

1独自のスタックで実行
2配列とコールバックを受信し、各要素でsettimeoutを0で実行

じっけん

では、撮影コンソールでtimerやapiを呼び出して無限に撮影コンソールを呼び出すとapiは実行できませんか?

for (let i = 0; i < 100000; i++) {
  console.log("안녕?");
  if (i === 5000) {
    setTimeout(function () {
      console.log("나도 말 좀하자");
    }, 1000);
  }
}

コードを簡単に記述して実験を行った.

5000回目はこのように過ぎて、話もできません.

10万回ものあいさつを聞いて、たった一言の様子だった.
結論:リミットレス回転中にパソコンが爆発して確認できなかったのですが、最後まで押すと、運転できなくなったようです.
リファレンスイメージ