브라우저 런타임 환경(JavaScript Runtime Environment)

 

 

위 그림을 참고하면서 보자면

 

JavaScript Engine에 Call Stack가 있고  Web APIs에 Render, Microtask Queue, Task Queue가 있다.

 

JavaScript Engine                                                                        Web APIs

l                ㅣ                                                                    

l                ㅣ       event loop                                                    Render

l                ㅣ     (원형으로 돈다)                        (Request Animation Frame, RenderTree, Layout, Paint)

l                ㅣ

l ㅡ ㅡ ㅡ ㅡ ㅣ                                                                      Microtask Queue    

   Call Stack                                                                    

                                                                                           Task Queue

 

돌아가는 원리를 보면 먼저 이벤트 루프는 테스크 큐에 있는 것들을 하나씩만 콜 스택으로 가져 오고나서 원래 하던

루프를 계속 돌다가 하나 가져오는 식으로 진행 했는데, 마이크로 테스크는 큐 안에 있는 것들이 모두 다 없어질 때까지

그리고 머물러 있는 동안 새로 들어오는 애들도 함께 처리를 계속적으로 하게된다.

 

버튼을 클릭하게 되면 handleClick()을 호출하게 되는데 handleClick()에서는 handleClick()이라고 출력을 한 다음에 바로 Promise를 만들게 된다. 이 프로미스는 만들어지면서 resolve라는 API를 이용하면 0이라는 값을 리턴하는(드림코딩 영상 참고) 프로미스가 만들어진다. 프로미스가 만들어져서 정상적으로 0을 만들게 되면 여기에 등록된 콜백이 수행이 되어진다. 콜백에서는 다시 then이라고 출력을 하게되고 handleClick()을 다시 호출 하게 된다.

 

이 handleClick()에서는 출력 resolve를 만들고 then 콜백이 수행이 되면서 다시 handleClick()을 부르게 된다. 이것도 무한정 반복하는 setTimeout을 이용한 것이랑 조금 비슷하다. 하지만 setTimeout은 태스크 큐를 이용하고 프로미스의 콜백은 마이크로 테스크 큐를 이용한다.

 

만약에 브라우저 상에서 처음에 버튼이 클릭이 되면 버튼 클릭 리스너에 등록된 콜백을 웹 APIs가 태스크 큐에 보내 주게 되고 테스크 큐에 들어온 아이가 이벤트 루프에 의해서 콜 스택으로 옮겨가게 된다. 콜 스텍으로 옮겨간 아이는 수행이 되고 여기서 프로미스를 만들고 프로미스 then도 등록되어진다.

 

이 프로미스 then은 나중에 프로미스가 완료가 되면 마이크로 태스크 큐에 들어오게 된다. 이벤트 루프가 돌다가 마이크로 태스크 큐에 들어온 then 콜백 함수가 여기에 있다가 이벤트 루프가 돌면서 머무르게 된다. 이벤트 루프가 또 얘를 콜 스택으로 가져와서 수행을 하다가 중간에 then이라는 콜백이 들어간다. 콜백으로 다른 then에 콜백이 들어오게 되고

이벤트 루프는 콜백이 끝날 때까지 머물러 있다가 끝나기 전에 다른 then이라는 콜백 함수가 등록이 된다.

 

그래서 계속 새로 들어오는 것들까지 마이크로 태스크 큐가 머물러 있는 동안 텅텅 빌 때까지 기다렸다가

마이크로 태스크 큐에 아이템이 하나도 없을 때 다시 루프를 돌게 된다. 이렇게 프로미스 then 안에서 또 다른 then을 호출하고 반복적으로 호출과정을 거치면 브라우저가 반응을 하지 않는 문제가 발생할 수 있다.

 

결론적으로 태스크 큐는 이벤트 루프가 하나씩 옮겨 놓고 루프를 도는 반면에 마이크로 태스크 큐는 모든 콜백 함수 뿐만 아니라 머물러 있는 동안 새로 추가되는 아이템들 까지도 실행이 다 될 때까지 기다리고 나서 다시 이벤트 루프를 돌아가게 된다.

 

참고: https://www.youtube.com/c/ZeroChoTV/playlists

ZeroCho TV

https://academy.dream-coding.com/courses/take/browser101/lessons/14138783-1-1

Dream Coding