(4) 태스크 큐(task queue) 와 마이크로 태스크 큐(micro task queue)

function cat() {
	console.log('cat')
}

function dog() {
	console.log('dog')
}

function fox() {
	console.log('fox')
}

setTimeout(cat, 0)
Promise.resolve().then(dog).then(fox)

- 예제의 실행 순서: dog -> fox -> cat

- 이벤트 루프는 하나의 마이크로 태스크 큐를 가지고 있으며 태스크 큐와는 다른 태스크를 처리한다. 마이크로 태스크에는 대표적으로 Promise 가 있으며, 기존 태스크 큐보다 우선권을 가지고 있다. 마이크로 태스크 큐가 비어지기 전까지 기존의 태스크 큐의 실행은 뒤로 밀림.

 # 대표적인 태스크 큐: setTimeout, setInterval, setImmediate

 # 대표적인 마이크로 태스크 큐: process, nextTick, Promise, queueMicroTask, MutationObserver

- 마이크로 태스크 큐 실행 후 렌더링이 일어나며, 각 마이크로 태스크 큐 작업이 끝날 때마다 한 번씩 렌더링할 수 있다.

 

예제

• 동기 sync: 0 
• 태스크 큐 task: 0 
• 마이크로 태스크 큐 micro task: 0 

- sync 는 즉 100000까지 숫자가 올라가기 전까지는 렌더링이 일어나지 않다 for 문이 끝나야 렌더링.

- task 는 setTimeout 콜백이 큐에 들어가기 전까지 잠깐의 대기 시간을 갖다가 1부터 100000까지 순차적으로 렌더링.

- micro 는 100000까지 숫자가 올라간 뒤 한 번에 렌더링.

 

/* repaint 전 콜백 함수 호출을 가능하게 하는 requestAnimationFrame 예제 */

console.log('a')

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

Promise.resolve().then(()=> {
	console.log('c')
})

window.requestAnimation(()=> {
	console.log('d')
})

- 실행 순서: a ->  c -> d -> b

- 브라우저에서 렌더링하는 작업은 마이크로 태스크 큐와 태스크 큐 사이에서 일어나며, 동기, 마이크로 태스크는 렌더링에 영향을 미침. 특정 렌더링이 JS 내 무거운 작업과 연관이 있다면 이를 어떤 식으로 분리할지 고민해야 함.