JavaScriptランタイムコンポーネント

2823 ワード
テキストリンク
スレッドプログラミング言語→CallStack!!

ソース:https://velog.io/@thms 200/Event-Loopイベント-ループ

Call Stack


コード実行時に積み上げられた場所.山積みになる.
💡 スタック(Stack):データ構造の1つ、先入後出(LIFO,Last In First Out)のルールに従います.
function a(){
  b();
  console.log('첫번째')
}

function b(){
  c();
  console.log('두번째')
}

function c(){
  console.log('세번째')
}

a()

ソース:https://onezerokang.medium.com/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EB%9F%B0%ED%83%80%EC%9E%84%EC%9D%98-%EA%B5%AC%EC%84%B1%EC%9A%94%EC%86%8C-memory-heap-call-stack-web-apis-callback-queue-event-loop-3854ec3cabcb

Memory Heap


メモリ割り当てが発生した場所(ex、プログラムで宣言した変数、関数などを含む)

Web API


ブラウザが提供するAPI
Call Stackから非同期関数(DOM、settimeout、addEventListener)を呼び出す
→非同期関数を実行した後、コールバックをコールバックキューに入れます.
ex)settimeoutでタイマー完了後に実行する関数.
clickEventListenerでclickイベントが発生した場合

Callback Queue


非同期コールバック関数を含む領域
💡 Queue(キュー):データ構造の1つで、先入先出のルールに従います.

Event Loop


Cal StackとCalback Queueの状態を確認します.
Call Stackが空の場合、Calback Queueの最初のコールバックをCall Stackにプッシュします.
このような繰り返しの行為を滴答と呼ぶ.

n/a.結論



ソース:https://velog.io/@thms 200/Event-Loopイベント-ループ
https://blog.sessionstack.com/how-does-javascript-actually-work-part-1-b0bacc073cf
https://medium.com/wonyoung/JavaScript-実行時の-コンポーネント-メモリ-heap-call-stack-web-apis-コールバック-queue-event-loop-3854 ec 3 cabcb
https://beomy.github.io/tech/javascript/javascript-runtime/
[BOJ 1620:私はポケモンマスター李多順です
React.jsではなくRiot.jsを採用した話、運用中サービス『GAMY』でリニューアル