자바스크립트의 Callback Queue
date
Jan 14, 2023
thumbnail
slug
자바스크립트의 Callback Queue
author
status
Published
tags
JavaScript
summary
자바스크립트는 싱글스레드 언어이기 때문에 비동기 처리를 위해 Promise, async 등을 사용한다. 이번 글에서는 Callback Queue에 대해 자세히 알아보고, Microtask Queue와 Task Queue의 우선순위를 설명한다. 마이크로태스크가 우선순위에 있으며, Animation Frames을 포함한 콜백함수는 Task Queue보다 우선 처리된다.
type
Post
updatedAt
Jul 15, 2023 07:29 AM
자바스크립트의 Callback QueueCallback QueueMicrotask Queue (Job Queue)Task Queue (Event Queue)Animation Frames우선순위
자바스크립트의 Callback Queue
자바스크립트는 싱글스레드 언어이기 때문에 한번에 하나의 Task만 진행할 수 있고 이런 단점을 Promise, async 같은 비동기로 처리한다는 것은 대부분의 개발자들이 알고 있을 것이다.
오늘은 Callback Queue에 대해 자세하게 알아보도록 하자.
Callback Queue
callback queue의 구조는 위와 같다.
Microtask Queue (Job Queue)
process, nextTick, Promise, Object.observe, MutationObserver를 담당한다.
등록된 모든 콜백함수가 처리될 때까지 계속 수행한다는 것이 특징이다.
Task Queue (Event Queue)
setTimeout, setInterval, setImmediate, RAF, UI렌더링을 담당한다.
Animation Frames
requestAnimationFrame API가 실행되면 콜백이 Animation Frames으로 담긴다.
우선순위
마이크로태스크가 우선순위에 있다.
이벤트 루프는 마이크로태스크 큐의 모든 테스크를 처리한 다음에, 테스크 큐의 테스크들을 처리한다.
따라서 Promise 콜백함수는 setTimeout()의 콜백함수보다 먼저 처리된다.
Animation Frames을 포함한다면 콜스택에 담기는 우선순위는 크롬기준으로 아래와 같다.
Microtask Queue > Animation Frames > Task Queue