이벤트 루프 (Event Loop)

이벤트 루프(Event Loop)

브라우저는 단일 스레드로서 한 번의 하나의 작업만을 처리할 수 있다.

하지만 실제로 웹 애플리케이션이 동작할 때 사용자는 동시에 여러 작업이 진행되는 것처럼 느낀다.(동시성 Concurrency)

이를 가능하게 만들어주는 것이 이벤트 루프이다.

 

 

이벤트 루프(Event Loop)와 브라우저의 환경 *(출처: https://poiemaweb.com/js-event) 

 

자바스크립트 엔진은 작업이 요청되면 Call Stack을 사용하여  요청된 작업을 단순히 순차적으로 실행할 뿐이다.

앞에서 언급한 동시성(Concurrency)을 지원하기 위해 필요한 비동기 요청(이벤트를 포함) 처리는 자바스크립트 엔진을 구동하는 환경,

즉 브라우저(또는 Node.js)가 담당한다.

 

구글의 V8을 비롯한 대부분의 자바스크립트 엔진의 2가지 영역

• Call Stack(호출 스택) : 작업이 요청되면(함수가 호출되면) 요청된 작업은 순차적으로 Call Stack에 쌓이게 되고 순차적으로 실행된다. 자바스크립트는 단 하나의 Call Stack을 사용하기 때문에 해당 task가 종료하기 전까지는 다른 어떤 task도 수행될 수 없다.

• Heap : 동적으로 생성된 객체 인스턴스가 할당되는 영역이다.

자바스크립트 엔진을 구동하는 환경의 영역(브라우저, Node.js)

• Event Queue(Task Queue) : 비동기 처리 함수의 콜백 함수, 비동기식 이벤트 핸들러, Timer 함수(setTimeout(), setInterval())의 콜백 함수가 보관되는 영역으로 이벤트 루프(Event Loop)에 의해 특정 시점(Call Stack이 비어졌을 때)에 순차적으로 Call Stack으로 이동되어 실행된다.

• Event Loop(이벤트 루프) : Call Stack 내에서 현재 실행 중인 task가 있는지 그리고 Event Queue에 task가 있는지 반복하여 확인한다. 만약 Call Stack이 비어있다면 Event Queue 내의 task가 Call Stack으로 이동하고 실행된다.

---

참고

poiemaweb.com/js-event

Event | PoiemaWeb