비동기성에 대한 심층 분석: 마이크로태스크, 매크로태스크 및 이벤트 루프

JavaScript의 비동기적 특성은 메커니즘을 직접 살펴보기 전까지는 마치 마법처럼 느껴질 수 있습니다. 비밀 소스는 마이크로태스크와 매크로태스크라는 두 가지 핵심 요소를 조율하는 이벤트 루프에 있습니다. 그렇다면 그것들은 무엇이고, 어떻게 작동하며, 왜 중요한가요? 이 개념을 익히기 위한 심층 분석, 예시, 팁을 통해 수수께끼를 풀어보겠습니다.

---

이벤트 루프와 작업 대기열

JavaScript 엔진은 단일 스레드에서 코드를 실행합니다. 비동기 작업을 처리하기 위해 콜 스택과 작업 대기열 사이를 조정하는 이벤트 루프를 사용합니다. 이러한 작업 대기열은 마이크로태스크와 매크로태스크의 두 가지 범주로 나뉩니다.

마이크로태스크

마이크로태스크는 현재 실행 중인 JavaScript 코드가 완료되고 호출 스택이 비어 있는 즉시 실행되어야 하는 우선순위가 높은 작업입니다. 신속한 후속 조치와 일관된 상태를 보장합니다. 일반적인 예는 다음과 같습니다.

• 약속 (.then, async/await)
• MutationObserver 콜백

매크로태스크

매크로태스크는 모든 마이크로태스크가 실행된 후에만 이벤트 루프가 처리하는 우선순위가 낮은 작업입니다. 더 크고 지연된 작업과 외부 이벤트를 처리합니다. 일반적인 예는 다음과 같습니다.

• 타이머(setTimeout, setInterval)
• MessageChannel 콜백
• I/O 작업

두 대기열에 속하지 않는 requestAnimationFrame도 있습니다. 브라우저의 렌더링 주기와 동기화되어 부드러운 애니메이션에 이상적입니다.

---

작동 방식

이벤트 루프가 작업을 처리하는 방법은 다음과 같습니다.

1. 동기 코드를 먼저 실행합니다.
2. 마이크로태스크 대기열을 지웁니다.
3. 매크로태스크 대기열에서 하나의 작업을 실행합니다.
4. 모든 작업이 처리될 때까지 2단계와 3단계를 반복합니다.

이러한 우선순위 지정은 약속과 같은 우선순위가 높은 작업이 타이머와 같이 덜 긴급한 작업보다 먼저 해결되도록 보장합니다.

---

실제 사례

다음은 동기 코드, 마이크로태스크, 매크로태스크 및 requestAnimationFrame 간의 상호 작용을 설명하는 실용적인 코드 조각입니다.

console.log('Synchronous code starts');

// Macrotask: setTimeout
setTimeout(() => {
  console.log('Macrotask: setTimeout');
}, 0);

// Macrotask: setInterval
const intervalId = setInterval(() => {
  console.log('Macrotask: setInterval');
  clearInterval(intervalId);
}, 100);

// Microtask: Promise
Promise.resolve().then(() => {
  console.log('Microtask: Promise then 1');
  Promise.resolve().then(() => {
    console.log('Microtask: Promise then 2');
  });
});

// Microtask: MutationObserver
const observer = new MutationObserver(() => {
  console.log('Microtask: MutationObserver');
});
const targetNode = document.createElement('div');
observer.observe(targetNode, { attributes: true });
targetNode.setAttribute('data-test', 'true');

// Macrotask: MessageChannel
const channel = new MessageChannel();
channel.port1.onmessage = () => {
  console.log('Macrotask: MessageChannel');
};
channel.port2.postMessage('Test');

// requestAnimationFrame
requestAnimationFrame(() => {
  console.log('Outside task queues: requestAnimationFrame');
});

console.log('Synchronous code ends');

---

예상 출력

출력 순서는 우선순위를 명확히 하는 데 도움이 됩니다.

1. 동기 코드: “동기 코드 시작”, “동기 코드 종료”
2. 마이크로태스크:
   • “마이크로태스크: 약속은 1”
   • “마이크로태스크: 그때 약속 2”
   • “마이크로태스크: 뮤테이션옵저버”
3. 매크로태스크:
   • “매크로태스크: setTimeout”
   • “매크로태스크: MessageChannel”
   • “매크로태스크: setInterval”
4. requestAnimationFrame: "외부 작업 대기열: requestAnimationFrame"

심층 분석: 마이크로태스크와 매크로태스크

마이크로태스크: 주요 특징

• 동기 코드 완료 후 즉시 실행
• 프라미스 해결이나 DOM 돌연변이에 대한 대응과 같은 소규모의 우선순위가 높은 업데이트에 적합합니다.
• 예: 약속, MutationObserver.

매크로태스크: 주요 특징

• 모든 마이크로태스크가 지워진 후에만 실행하세요.
• 대규모, 우선순위가 낮은 작업 또는 외부 이벤트 처리에 사용됩니다.
• 예: 타이머, MessageChannel.

requestAnimationFrame: The Odd One Out

작업 대기열의 일부는 아니지만 requestAnimationFrame은 비동기에서 독특한 역할을 합니다. 다음 브라우저를 다시 그리기 전에 코드가 실행되도록 예약하여 프레임 드롭을 최소화하고 애니메이션을 더욱 부드럽게 만듭니다.

---

결론

마이크로태스크, 매크로태스크, 이벤트 루프 간의 상호 작용은 JavaScript 비동기성의 핵심입니다. 이러한 개념을 이해하고 활용하면 보다 효율적이고 유지 관리가 가능하며 성능이 뛰어난 코드를 작성할 수 있습니다. 기억하세요: 마이크로 작업을 먼저 수행하고 매크로 작업을 두 번째로 수행하고 시각적 개선을 위해 requestAnimationFrame을 수행합니다. 즐거운 코딩하세요!

위 내용은 비동기성에 대한 심층 분석: 마이크로태스크, 매크로태스크 및 이벤트 루프의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!