자바스크립트 특징

싱글스레드

한 번에 하나의 task만 처리할 수 있는 것

자바스크립트의 동시성을 지원하는 것이 바로 이벤트 루프

이벤트 루프

브라우저에 내장되어 있는 기능 중 하나

자바스크립트 엔진은

1. Call Stack
2. Heap

Call Stack

소스코드 평가 과정에서 생성된 실행 컨텍스트가 추가되고 제거되는 스택 자료구조인 실행 컨텍스트

자바스크립트 엔진은 단 하나의 콜 스택을 사용하기 때문에 최상위 실행 컨텍스트(실행중인 실행 컨텍스트)가 종료되어 콜 스택에서 제거되기 전까지는 다른 어떤 태스크도 실행되지 않습니다.

Heap

힙은 객체가 저장되는 메모리 공간

브라우저 환경의 구조

1. 자바스크립트 엔진

• Heap : 객체들은 힙 메모리에 할당된다. 크기가 동적으로 변하는 값들의 참조 값을 갖고 있다.
• Call Stack : 함수 호출 시, 실행 컨텍스트가 생성되며, 이러한 실행 컨텍스트들이 콜 스택을 구성한다.

2. Web API or Browser API

• 웹 브라우저에 구현된 API이다.
• DOM event, AJAX, Timer 등이 있다.

3. 이벤트 루프

• 콜 스택이 비었다면, 태스크 큐에 있는 모든 콜백 함수를 처리한다.

4. 태스크 큐

• 이벤트 루프는 하나 이상의 태스크 큐를 갖는다.
• 태스크 큐는 태스크의 Set이다.
• 이벤트 루프가 큐의 첫 번째 태스크를 가져오는 것이 아니라, 태스크 큐에서 실행 가능한(runnable) 첫 번째 태스크를 가져오는 것이다. 태스크 중에서 가장 오래된 태스크를 가져온다.

진행방식

해당 task 들이 Call Stack에 쌓이는데 그중 setTimeout같은 함수는 Web apis로 이동되어 일정 시간이 되면 queue인 일시 보관되는 영역에 들어가고 event loop에 의해서 콜 스택에 현재 실행 중인 실행 컨텍스트가 있는지, 그리고 태스크 큐에 대기 중인 함수가 있는지 반복해서 확인합니다.

만약 콜 스택이 비어 있고, 태스트 큐에 대기 중인 함수가 있다면 이벤트 루프는 순차적으로(선입 선출) 태스크 큐에 대기 중인 함수를 콜 스택으로 이동시킵니다. 이 때 콜 스택으로 이동한 함수는 실행됩니다.

간단하게 Call Stack에 컨텍스트들이 쌓이다가 비동기 내용들은 Web apis에 옮겨 해당시간 후 queue로 옮겨 대기하다가 Call Stack내용이 전부 끝나면 event loop에 의해 대기하는 queue 부분들을 Call Stack으로 옮겨 실행한다.

출처

이벤트루프
블랙커피스터디