시작

읽기 전에 알면 좋은 내용:

• 프로세스는 메모리에 올라가 실행되는 상태에 있는 프로그램이다

• blocking/non-blocking은 호출되는 프로세스가 제어권을 호출하자마자 돌려주는지 아니면 할일을 처리하고 돌려주는지에 대한 것이다

요약

• javvascript engine는 single threaded이고
• javascript runtime은 multi threaded라 non blocking이 가능하다

자바스크립트는 싱글 스레드, non-blocking 언어이다

위 문장의 정확한 뜻은 자바스크립트 엔진이 싱글 스레드, 자바스크립트 런타임이 non-blocking 이기 때문에 자바스크립트는 싱글 스레드 + non-blocking 두 가지 특징을 모두 갖는다는 의미이다

자바스크립트 엔진

자바스크립트 엔진은 1개의 call stack을 가지고 있기 때문에 한번에 하나의 작업만 처리 가능하다 (=싱글 스레드)

자바스크립트 런타임

자바스크립트 런타임은 실제로 자바스크립트가 실행되는 환경이다. 브라우저, node.js가 자바스크립트 런타임이다.

자바스크립트 런타임는 자바스크립트 엔진 + Web API + Callback Queue + Event loop 으로 구성되어 있다

Web API

Web API는 자바스크립트 엔진과 다른 스레드 에서 실행된다. 이때 DOM 에서 발생하는 이벤트나, HTTP 요청, setTimeout 같은 비동기 작업들은 바로 엔진의 call stack에 넣어지지 않고 Web API -> Callback Queue로 이동 된 후 엔진의 call stack이 비어 있으면 Event loop에서 Web API 명령어를 엔진의 call stack에 넣은 후 실행한다

Callback Queue

Web API의 명령어를 call stack에 넣기전에 임시적으로 저장하는 공간이다

Callback Queue에는 Microtask, animation frames, task queue 3가지가 존재하고 Web API의 종류에 따라 알맞는 queue에 넣어진다

이러한 Callback Queue는 Call stack에 넣어지는 우선순위라는 것을 갖는다. Microtask, animation frames, task queue 순서대로 엔진의 Call stack으로 명령어가 이동된다

Event Loop

자바스크립트 엔진이 돌아가는 스레드에서 동작하는 루프이다

Callback Queue와 Call stack이 비어져 있는지 지속적으로 확인해 Call stack이 비어있으면 Callback Queue의 명령어를 Call stack으로 이동하는 역할을 한다

끝

😊