자바스크립트 런타임 환경(setTimeout, Promise then, RequestAnimationFrame)

setTimeout()

Promise then()

 다음과 같이 같은 재귀 호출 기능을 수행하는 두 코드가 있다. 하지만 위 두 코드의 실행 결과는 다르다.

setTimeout() 실행 결과

Promise then 실행 결과

 setTimeout()으로 재귀 호출한 결과 css에 적용 한 button:hover의 색상값이 마우스 커서를 뗐을 때 잘 해제되는 반면에 Promise then으로 재귀 호출한 결과는 마우스 커서를 뗐음에도 button:hover의 색상 값이 그대로 남아 있는 것을 확인할 수 있다.

 

 이는 두 비동기 함수의 콜백 함수가 각기 다른 큐에 적재되기 때문이다. 

 setTimeout()과 같은 경우는 테스크 큐에 적재되는 반면 Promise then과 같은 경우는 Microtask 큐에 적재된다. 이 둘 모두 콜 스택이 비어있을 때 이벤트 루프에 의해 콜 스택에 적재된다는 점은 똑같으나 다소 차이가 존재한다.

 

 테스크 큐에 적재 된 콜백 함수와 같은 경우는 콜 스택에 적재되어 실행이 종료하게 되면 테스크 큐에 그 다음 콜백 함수가 적재해 있더라도 이를 이어서 처리하지 않은 채, 이벤트 루프는 다시 순환 참조를 하게 된다. 이후 이벤트 루프가 계속 순환 참조하게 되면서 일정시간(60fps)가 되었을 때 랜더링 시퀀스를 참조하게 되고 RequestAnimationFrame에 의해 button:hover의 값이 업데이트 될 수 있는 기회가 생긴다.

 

 반면에, Microtask 큐와 같은 경우는 이벤트 루프가 자신의 저장소 내에 콜백 함수들이 모두 다 없어질 때까지 기다릴 뿐만 아니라 콜백 함수가 모두 pop 되어 종료되기 전에 새로운 콜백 함수가 Microtask 큐에 새롭게 적재 된 콜백 함수가 존재한다면 이를 계속 콜 스택에 적재한다. 즉, Promise then에서는 이벤트 루프가 정상적으로 순환 참조하지 못한 채 계속 Microtask 큐에 머물게 되어 랜더링 시퀀스를 참조할 기회가 생기지 않아 브라우저를 업데이트 하지 못한 채 색상값이 변하지 않은 것이다.

requestAnitmationFrame

실행 결과

 앞서  언급 한 requestAnimationFrame 또한 이벤트 루프에 의해 참조된다. 다만, 이벤트 루프에 의해 매번 참조되는 것이 아니라 일정 시간의 랜더링 간격에 맞춰 참조가 일어나는데, 이는 이벤트 루프의 순환 되는 속도가 랜더링이 주기적으로 이루어지는 60fps보다 빠르기 때문이다. 

 requestAnimationFrame 또한 자료를 큐 구조로 저장한다. FIFO(Fisrt in First out)이라는 큐의 특성 상 style에 적용 된 순서대로 beige => orange => red 가 빠져 나가 최종적으론 red 색상이 브라우저에 적용된다.