[JavaScript] 이벤트 루프, 태스크 큐

자바스크립트는 싱글 스레드 기반의 언어이고, 자바스크립트 엔진은 하나의 호출 스택만을 사용합니다. 이는 요청이 동기적으로 처리되어, 한 번에 한 가지 일만 처리할 수 있음을 의미한다.

이러한 문제는 비동기 콜백을 사용하여 해결 가능하며 비동기 요청의 처리는 브라우저, Node.js에서 처리된다.

비동기 처리를 위한 브라우저 구조

1) 자바스크립트 엔진

• 콜스택(Call Stack) : 함수 호출 시 실행 컨텍스트가 생성되며 이 실행 컨텍스트들로 구성된다.
• 메모리힙(Memory Heap) : 객체가 저장되는 공간으로 크기가 동적으로 변하는 값들의 참조 값을 갖고 있다.

2) Web API or Browser API
: 웹 브라우저에 구현된 API
: DOM event, AJAX, Timer 등

3) 이벤트 루프 (Event Loop)
: 콜스택과 콜백큐의 상태를 체크하여, 콜스택이 빈 상태가 되면 콜백큐의 실행 가능한 첫번째 콜백을 콜스택으로 밀어주는 역할을 한다.
: 싱글 스레드 환경에서 비동기 방식으로 여러 일이 동시에 실행되는 것처럼 보이는 자바스크립트의 동시성을 지원한다.

4) 태스크 큐 (Task Queue)
: 콜백함수, 이벤트 핸들러가 일시적으로 보관되는 영역 참고

 

 

참고
: https://whales.tistory.com/m/130