JS엔진이 일을 처리하는 방법

우리가 작성한 JS파일에 있는 함수들은 어떻게 동작할까?

 

JS엔진이 동작할때 Stack과 Que가 사용된다.

자료구조에서 흔히 들어봤을법 한데 Stack은 나중에 들어온 일이 먼저 처리된다.(Last In First Out)

Que는 반대로 먼저 들어온 일이 가장 먼저 처리된다.(First In First Out)

 

JS엔진에서 우리가 작성한 코드를 천천히 한 줄씩 읽어나간다.

그리고 함수를 호출하면 그 함수를 stack에 쌓게 된다.

 

stack에 처리해야할 일이 쌓이면 JS엔진은 call Stack에 쌓인 일들을 하나하나 처리해나간다.

하지만 우리가 브라우저를 이용하면서 js에서 처리해야할 일 뿐만 아니라

render나 Web APIs에서 처리해야할 일들도 있는데 이를 도와주는 게 바로 event loop이다.

 

event loop는 말그대로 loop처럼 뱅글뱅글 도는데 call Stack > Render > microtaskQue > taskQue와 같이

계속 감시하면서 순회한다.

 

callstack은 JS에서 호출한 함수가 담긴다고 앞에서 이야기했는데

render, microTaskQue, taskQue는 뭘까?

 

render는 보통 requestAnimation이나 paint, composit, layout에서 변동사항이 발생할 때 생기는 일을 뜻한다.

animation에서 처리해야할 일이 쌓이면 requestAnimation에 일이 쌓이게 되고 event loop는 여기에 머무르면서

쌓인 일들을 모두 처리하고 microTaskQue로 넘어간다.

 

microTaskQue는 promise와 observe에서 처리해야할 일들이 담긴다. microtaskQue에 쌓인 일들일 하나씩 callStack에

옮기면서 JS엔진이 일을 수행할 수 있도록 도와준다. 만약 CallStack으로 옮긴 일을 수행하는 도중에 microtaskQue에

새로운 일이 들어온다면 그것도 CallStack으로 옮겨 microtaskQue가 텅텅 빌 때까지 eventloop가 머무른다.

여기서 모든 일을 callStack에 옮겨 처리하고 나면 taskQue로 이동한다

 

taskQue는 webAPI에서 수행하는 setTimeout과 같은 애들이 쌓이는 곳이다. eventloop가 taskQue에 들리면 마찬가지로

먼저 쌓인 일을 CallStack에 옮겨 수행하도록 돕는데 microtaskQue와 차이점은 딱 1개만 빼오고 넘어간다는 점이다.

microtaskQue는 처리하는 도중에 다른 일이 들어와도 텅텅 빌 때까지 있지만 taskQue에 쌓인 일은 딱 하나만 빼오고 원래 순회하던 길을 다시 걷는다는 차이점이 있다.

 

정리하자면 크게 CallStack, Render, MicroTaskQue, TaskQue로 쌓이는 일들이 나뉜다.

EventLoop는 위 네 개를 계속 순회하면서 일을 처리하는 데 모두 같은 방식으로 처리하는 게 아니라 저마다 다른 특징이 있다. 이를 꼭 유념하고 알아두길 바란다!