[JavaScript] 이벤트 루프와 큐

kim unknown·2022년 5월 13일
1

JavaScript

목록 보기
20/24
post-thumbnail

자바스크립트의 비동기처리에서 이벤트 루프와 태스크 큐에 대해서 간략하게 언급하고 넘어갔었다. Event Loop는 브라우저에 존재하는 여러 Queue들에 우선순위를 부여해 어떤 task를 먼저 수행할지 결정한다. 그런데 사실 우리가 알고 있던 태스크 큐 외에도 다른 큐가 더 있다. 어떤 큐인지 알아보도록 하자.

이벤트 루프 이해에 도움을 얻은 영상 📽️ Event Loop

• Task Queue(Macrotask Queue)

우리가 기존에 알고 있던 태스크 큐(Task Queue)는 매크로태스크 큐(Macrotask Queue)라고도 부른다. 태스크 큐는 setTimeout(), setInterval(), setImmediate()와 같은 task를 넘겨받는다.

매크로태스크 큐에 들어가는 함수
• setTimeout
• setInterval
• setImmediate
• requestAnimationFrame
• I/O
• UI 렌더링


• Microtask Queue

마이크로태스크 큐(Microtask Queue)는 Promise나 async/await와 같은 비동기 호출을 넘겨받는다. 또한, Microtask의 우선순위가 Macrotask의 우선순위보다 더 높다.
즉, 이벤트 루프의 비동기 작업 처리 우선순위는 Microtask Queue → Animation Frames → Task Queue 순이다.

마이크로태스크 큐에 들어가는 함수들
• process.nextTick
• Promise
• Object.observe
• MutationObserver

이벤트 루프는 매크로태스크 큐(일반 태스크 큐)를 방문할 때는 한 번에 하나씩만 처리한다. 마이크로태스크 큐를 방문할 때는 큐 안에 있는 모든 마이크로태스크를 전부 처리한다.


• 이벤트 루프 알고리즘

  1. 매크로태스크 큐에 있는 태스크는 한 번에 한 가지씩만 처리한다. 태스크는 먼저 들어온 순서대로 처리한다.
  2. 마이크로태스크 큐에 있는 모든 마이크로태스크를 처리한다. (마이크로태스크 큐를 비움) 태스크는 먼저 들어온 순서대로 처리한다.
  3. 렌더링할 것이 있다면 처리한다.
  4. 매크로태스크 큐가 비어있어서 처리해야 할 태스크가 없다면 잠들어 있다가 새로운 태스크가 추가되면 다시 1로 돌아간다.

* 마이크로태스크 전체가 처리되는 동안에는 UI 변화나 네트워크 이벤트 핸들링이 일어나지 않는다. 렌더링이나 네트워크 요청 등의 작업들은 마이크로태스크 전부가 처리되고 난 직후 처리된다.

* 태스크 처리에 긴 시간이 걸리면, 브라우저는 태스크를 처리하는 동안에 발생한 사용자 이벤트 등의 새로운 태스크들을 처리하지 못한다. 따라서, CPU를 많이 잡아먹는 태스크를 여러 개로 쪼개면, 전체 실행 시간을 줄이면서 사용자와의 상호작용도 동시에 가능해진다.


참고 자료
🔗 이벤트 루프와 매크로태스크, 마이크로태스크
🔗 Task Queue말고 다른 큐가 더 있다고?

profile
과거의 나에게 묻기 위한 기록

0개의 댓글