Javascript Runtime Environment

메모리 구조

Code

Stack

• 함수 호출과 관련된 데이터, 지역 변수, 함수 호출 스택 프레임 등을 저장

• 🧺 후입선출원칙(LIFO, Last-In-First-Out)

• 함수가 호출될 때 스택에 추가push, 반환될 때 스택에서 제거pop

• 순서대로 쌓기 때문에 순차적으로 동작

Heap

• 객체, 배열, 함수 등을 저장

• 참조값을 통해 접근

• 크기나 수명이 런타임 중에 동적으로 할당됨

Data

프로세스(Process)

💡

컴퓨터(운영체제) 위에서 연속적으로 실행되고 있는 프로그램 메모리 위에서 독립적으로 실행

 

스레드

💡

프로그램(프로세스) 안에서 하나의 업무를 수행한다. 한 프로세스 안에서 여러개의 쓰레드가 동작할 수 있다. 스레드는 하나의 업무를 담당하며 이를 위해 Stack을 각각 가진다. 하나의 프로세스에서 스레드가 여러개라면 하나의 프로그램을 위한 데이터를 공유해야하기 때문에 Code, Data, Heap을 공통 접근, 업데이트 한다. 이때, 여러 스레드에서 공통적으로 접근하기 때문에 동기화 문제가 발생할 수 있으며 프로그램의 동작을 예측하기 어렵다는 문제가 있다.

싱글스레드

• 한 번에 하나의 명령어만을 실행

• 멀티스레드에 비해 간단한 동작 구조로 프로그램의 동작을 예측하기 쉽다.

• 그러나 동시에 여러 작업을 처리하지 못하는 한계도 가지고 있는데 이를 보완하기 위해 아래 처럼 동작함

Web API

이벤트 루프

큐(Queue)

• 🚿선입선출원칙(FIFO, First-In-First-Out)

Task Queue

• 일반적인 비동기 작업 콜백

• 한번에 하나씩 가져감

Micro Task Queue

• 프로미스와 관련된 콜백 (then, catch)

• 우선 순위가 가장 높아 가장 먼저 추가됨

• 한번 오면 쭉

Render Queue

• 브라우저에서 발생하는 이벤트들 (click)

• 가끔 들림 (눈에 자연스러운 정도만 60 fps)

• 한번 오면 쭉

자바스크립트 런타임 환경

1. 코드가 실행되면서 호출 스택에 함수가 차곡차곡 쌓입니다.

2. 만약 비동기 함수가 호출되면 해당 함수는 웹 API로 이동하고 호출 스택은 비워집니다.

3. 비동기 작업이 완료되면 해당 콜백은 태스크 큐로 이동합니다.

4. 이벤트 루프는 호출 스택이 비어있는지 확인하고, 비어있으면 태스크 큐의 작업을 호출 스택으로 가져와 실행합니다.

5. 마이크로태스크 큐도 마찬가지로 확인하고 실행됩니다.