(JS) Event Loop

Mirrer·2022년 5월 2일

목록 보기

18/24

프로세스(Process)

프로그래밍을 동작하는 최고의 단위

프로세스란 프로그래밍을 동작하는 최고의 단위로 컴퓨터(운영체제) 위에서 연속적으로 실행되고 있는 프로그램이다.

각각의 프로세스는 메모리 위에서 독릭접으로 실행되고 리소스 자원들이 할당된다.

프로그램안에서 동시에 여러 개가 수행될 수 있는 작은 일꾼 단위

쓰레드란 프로그램안에서 동시 다발적으로 수행되는 작은 일꾼 단위이며 프로세스 하나에는 여러개의 쓰레드가 할당된다.

할당된 쓰레드는 동시 다발적으로 업무를 수행해 프로세스의 효율적인 일처리를 도와준다.

각각의 쓰레드는 일의 흐름을 기억할 수 있는 고유의 stack이 존재하며 프로세스에 지정된 코드와 데이터 힙들을 공통적으로 접근이 가능하다.

Asynchronous글에서 말했듯 자바스크립트는 Java, C++,....등등과는 다른 Single thread 언어다.

하지만 자바스크립트 또한 Web APIs를 이용하여 Multi thread를 구현할 수 있다.

즉 런타임환경(자바스크립트가 동작하고 있는 실행 환경)에서 다양한 방식을 통해 Multi thread과 같은 효과를 얻을 수 있다.

Stack : 책을 쌓는 것처럼 차곡차곡 쌓아 올린 형태의 자료구조, 늦게 들어온 데이터가 가장 먼저 나가는 후입선출(LIFO : Last In First Out)
Queue : 줄을 서서 기다리는 형태의 자료구조, 먼저 들어온 데이터가 가장 먼저 나가는 선입선출(FIFO : First In First Out)

자바스크립트 런타임 환경을 이해하기 위해 대표적인 Web APIs함수인 setTimeout함수 예제 코드를 보며 실행 과정을 이해해보자.

setTimeout(() => {
  console.log('Hello');
}, 0);

console.log('world');

// world
// hello

자바스크립트는 single thread언어이기 때문에 코드가 순차적으로 실행된다.

하지만 위 예제 코드의 결과는 예상과는 반대로 world가 출력된 뒤 hello가 출력된다.

예제 코드는 다음과 같은 순서로 진행된다.

자바스크립트 엔진은 코드의 평가과정을 거쳐 실행한다.
setTimeout함수를 call stack에 push
call stack에 push된 setTimeout함수는 call stack에서 지워지고 Web API는 타이머를 시작
타이머를 시작하면 자바스크립트 엔진은 병렬적으로 콜스택을 실행
console.log('world')를 call stack에 push한 뒤 실행
실행이 완료된 console.log('world')를 call stack에 pop
지정한 타이머가 종료되어 setTimeout에 지정한 콜백함수는 Task Queue에 전달
Event Loop는 call stack과 task queue를 지속적으로 관찰하여 콜스택이 빈 상태이면 Task Queue에 콜백함수를 call stack으로 이동시켜 실행

Call stack과 브라우저의 queue를 관찰하는 감시자

Event Loop는 Call Stack과 브라우저의 queue의 상태를 체크하여, Call Stack이 빈 상태가 되면, 브라우저의 queue의 콜백함수를 Call Stack으로 이동시킨다.

이러한 반복적인 행동을 틱(tick)이라 부른다.

Task Queue : Web APIs에 등록한 콜백 함수를 특정한 이벤트(setTimeout, click...등등)가 발생했을 때 Task Queue에 전달
Microtask Queue : Promis then, Web API인 mutation observer에 등록된 콜백 함수를 Microtask Queue에 전달
Render Queue: 브라우저에서 요소를 움직이거나 애니메이션할 때 주기적으로 화면에 업데이트, 브라우저가 업데이트 되기 전 실행할 콜백함수를 Request Animation Frame에 전달

while(true) {
	// do something
}

Event Loop는 Call Stack에서 함수가 종료될때까지 이동하지 않고 대기
Call Stack의 함수가 모두 종료되면 Event Loop는 다시 동작
Call Stack이 비어있을 때 Event Loop는 Microtask Queue를 Task Queue보다 먼저 Call Stack에 넣고 Render Queue는 화면을 업데이트 하기 위해 주기적으로 호출

Task Queue : Event Loop는 Task Queue의 있는 작업을 확인하면 단 하나의 작업만 콜 스택으로 이동시킨다. 그리고 작업이 끝나면 다른 작업을 가져오는 것이 아니라 다시 순회를 시작
Microtask Queue : Event Loop가 Microtask Queue의 작업을 확인하면 모든 작업이 종료될때까지 이동하지 않고 대기한다. 그리고 작업 실행 중 새로운 작업이 들어오게 된다면 그 작업까지도 끝날때까지 대기
Render : 초당 60frame을 구현하기 위해 이벤트루프는 Render에 머물러있지 않고 적당한 주기로 확인하며 Render Tree를 업데이트