setTimeout과 Promise를 사용하여 몇 줄을 실행하면 출력 순서가 놀라울 수 있습니다. 자바스크립트 이벤트 루프가 그 이유를 설명합니다. 이는 단일 스레드 언어가 정지 없이 타이머, 네트워크 호출 및 클릭을 처리할 수 있도록 하는 메커니즘입니다.

일단 이해하고 나면 혼란스러운 버그 전체가 이해되기 시작합니다. 우리는 Node.js 24에서 각 예제를 실행했고 그 실행에서 출력이 나왔습니다. 핵심 순서 규칙은 브라우저에도 적용되며 Node.js의 차이점을 지적합니다. JavaScript promise의 기본 사항을 이미 알고 있다면 이로부터 더 많은 것을 얻을 수 있습니다.

이벤트 루프가 존재하는 이유

JavaScript는 하나의 메인 스레드에서 코드를 실행하므로 한 번에 한 부분만 실행됩니다. 단순히 네트워크 요청을 기다린 경우 응답이 돌아올 때까지 페이지가 정지됩니다.

따라서 JavaScript는 기다리지 않습니다. 느린 작업은 호스트 환경, 즉 백그라운드에서 이를 처리할 수 있는 브라우저나 Node.js로 전달됩니다. 해당 작업이 완료되면 콜백이 대기열에 배치됩니다. 이벤트 루프의 임무는 대기 중인 콜백이 비어 있을 때 스택으로 이동하는 것입니다.

혼자 일하는 요리사를 생각해 보세요. 요리사는 그것을 쳐다보는 대신 오븐에 접시를 넣고 타이머를 맞춘다. 타이머가 울리면 작업이 목록에 올라가고 요리사는 현재 손에 있는 작업을 마친 후 작업을 가져옵니다.

움직이는 부분

작업을 매크로태스크라고도 합니다. 엄밀히 말하면 여러 작업 소스가 있을 수 있으며 정확한 세부 사항은 환경에 따라 다릅니다.

규칙

1. 호출 스택이 빌 때까지 모든 동기 코드를 실행합니다.
2. 도중에 추가된 새로운 작업을 포함하여 모든개의 마이크로 작업을 실행하세요.
3. 브라우저에서 업데이트가 예정된 경우 업데이트를 렌더링합니다.
4. 대기열에서 작업 하나개를 가져와 실행합니다.
5. 2단계로 돌아갑니다.

가장 중요한 세부 사항은 모든개의 마이크로 작업과 하나의개의 작업입니다. 대부분의 이벤트 루프 퍼즐은 해당 단일 규칙을 적용하여 해결됩니다.

주문 보기

console.log("1 sync");
setTimeout(() => console.log("5 timeout"), 0);
Promise.resolve().then(() => console.log("3 promise"));
queueMicrotask(() => console.log("4 microtask"));
console.log("2 sync");

// 1 sync
// 2 sync
// 3 promise
// 4 microtask
// 5 timeout

일어난 일은 다음과 같습니다. 두 개의 console.log 라인은 동기식이므로 먼저 실행되었습니다. Promise 콜백과 queueMicrotask는 마이크로태스크 대기열로 들어가 스택이 비자마자 추가된 순서대로 실행되었습니다. 타이머 콜백은 지연 시간이 0이더라도 작업 차례를 기다려야 했습니다.

마이크로태스크는 타이머 사이에서 실행됩니다.

모든 단일 작업 후에 마이크로태스크 대기열은 다시 비워집니다. 이 예는 이를 증명합니다:

setTimeout(() => {
  console.log("timer 1");
  Promise.resolve().then(() => console.log("promise inside timer 1"));
}, 0);
setTimeout(() => console.log("timer 2"), 0);

// timer 1
// promise inside timer 1
// timer 2

첫 번째 타이머 중에 생성된 Promise는 두 번째 타이머 전에 실행되었습니다. 최신 브라우저와 Node.js 11 이상은 이런 방식으로 동작합니다.

기다림이 맞는 곳

await 기능을 두 개로 나눕니다. 동기식으로 실행되기 전의 모든 작업과 이후의 모든 작업은 마이크로태스크로 예약됩니다. 이는 많은 사람들을 놀라게 합니다.

async function task() {
  console.log("A before await");
  await null;
  console.log("C after await");
}

task();
console.log("B after calling task");

// A before await
// B after calling task
// C after await

async 기능은 백그라운드에서 시작되지 않습니다. 첫 번째 await에 도달할 때까지 동일한 스레드에서 실행됩니다. 이는 null과 같이 실제 약속이 아닌 것을 기다리는 경우에도 적용됩니다. 이 구문에 대한 자세한 내용은 JavaScript async/await 가이드를 참조하세요.

루프 차단

동기 코드가 실행되는 동안에는 다른 어떤 것도 실행할 수 없습니다. 이를 보여주기 위해 타이머를 0ms로 설정한 다음 스레드를 0.5초 동안 사용 중으로 유지합니다.

const start = Date.now();
setTimeout(() => console.log("timer ran after", Date.now() - start, "ms"), 0);
while (Date.now() - start < 500) {}

// timer ran after about 500 ms

타이머의 지연은 최소이며 보장되지는 않습니다. 스택이 해제된 경우에만 실행되었습니다. 웹페이지에서 이와 같은 긴 루프는 클릭이 응답하지 않고 애니메이션이 중지됨을 의미합니다. 서버에서는 다른 모든 요청이 기다려야 하기 때문에 느린 동기 호출 하나가 Node.js 프로세스의 모든 사용자에게 피해를 줄 수 있습니다.

차단의 일반적인 원인에는 거대한 루프, 매우 큰 JSON 구문 분석, 요청 처리기의 readFileSync과 같은 동기 파일 함수 및 치명적인 정규 표현식이 포함됩니다.

대응력 유지

무거운 작업의 경우 이벤트 루프에 숨을 쉴 수 있는 기회를 제공하십시오. 한 가지 방법은 때때로 타이머를 일시 중지하여 다른 작업을 실행하는 것입니다.

const items = [0, 1, 2, 3, 4];

async function processAll() {
  for (const item of items) {
    if (item === 2) await new Promise((r) => setTimeout(r, 0));
    console.log("item", item);
  }
}

setTimeout(() => console.log("other work gets a turn"), 0);
processAll();

// item 0
// item 1
// other work gets a turn
// item 2
// item 3
// item 4

우리가 실제 작업을 양보했기 때문에 다른 타이머가 중간에 실행되었습니다. 실제 코드는 너무 많은 항목 또는 밀리초마다 생성됩니다. 이미지 처리와 같이 CPU를 많이 사용하는 작업의 경우 브라우저의 Web Worker나 별도의 스레드에서 실행되는 Node.js의 작업자 스레드를 사용하세요.

마이크로태스크 기아

루프는 계속 진행하기 전에 마이크로 작업 대기열을 완전히 비우기 때문에 더 많은 일정을 계속 예약하는 마이크로 작업은 다른 모든 작업을 중지할 수 있습니다. 우리는 100,000개의 연결된 마이크로태스크를 사용하여 이를 테스트했습니다.

let count = 0;
let timerFired = false;
setTimeout(() => { timerFired = true; }, 0);

function spin() {
  count++;
  if (count < 100000) queueMicrotask(spin);
  else console.log("timer fired during microtasks?", timerFired);
}
queueMicrotask(spin);

// timer fired during microtasks? false

모든 작업이 완료될 때까지 타이머를 실행할 수 없습니다. 해당 체인이 종료되지 않으면 타이머가 실행되지 않으며 브라우저에서 페이지가 다시 그려지지 않습니다. 해결된 Promise에 대해 await을 사용하면 여기서는 도움이 되지 않습니다. 왜냐하면 이는 단지 또 다른 마이크로 작업을 추가하기 때문입니다. 다른 사람에게 차례를 주기 위해서는 타이머와 같은 실제 작업이 필요합니다.

브라우저에서 렌더링

브라우저는 일반적으로 작업 사이에 그림을 그릴 기회를 얻습니다. 이는 일반적인 버그를 설명합니다.

spinner.hidden = false;
doHeavyWork();              // blocks the thread
spinner.hidden = true;

브라우저가 해당 줄 사이를 렌더링할 기회가 없었기 때문에 스피너는 나타나지 않습니다. 이를 수정하려면 무거운 작업이 시작되기 전에 프레임을 통과시키거나 해당 작업을 작업자에게 옮기십시오. 시각적 요소를 변경하는 코드의 경우 requestAnimationFrame은 다음 페인트 직전에 실행되므로 애니메이션에 적합한 도구입니다.

Node.js 차이점

Node.js에는 타이머, I/O 폴링 및 setImmediate을 포함한 여러 단계로 구성된 자체 이벤트 루프가 있습니다. 또한 자체 대기열에서 실행되는 process.nextTick도 있습니다. 비동기 함수 내부에서 이를 실행할 때 본 내용은 다음과 같습니다.

setTimeout(() => console.log("timeout"), 0);
setImmediate(() => console.log("immediate"));
process.nextTick(() => console.log("nextTick"));
Promise.resolve().then(() => console.log("promise"));

// promise
// nextTick
// immediate
// timeout

많은 기사에서는 nextTick이 항상 약속보다 뛰어나고 타이머가 setImmediate보다 낫다고 말합니다. 우리의 결과는 그것이 그렇게 간단하지 않다는 것을 보여줍니다. 우리 코드는 이미 마이크로태스크 내에서 실행 중이었으므로 약속 대기열이 먼저 실행되었습니다. 그리고 setTimeout과 setImmediate의 순서는 어디서 호출되는지에 따라 달라지는 것으로 알려져 있다. 따라서 이들의 정확한 순서에 의존하는 코드를 작성하지 마십시오. 한 가지 일이 계속해서 발생해야 한다면 명시적으로 연결하세요.

면접퀴즈

답을 읽기 전에 순서를 맞춰보세요.

console.log("a");
setTimeout(() => console.log("b"), 0);
Promise.resolve().then(() => {
  console.log("c");
  setTimeout(() => console.log("d"), 0);
  Promise.resolve().then(() => console.log("e"));
});
console.log("f");

우리의 실행은 a, f, c, e, b, d를 인쇄했습니다. 이유는 다음과 같습니다.

1. a과 f는 동기식이므로 먼저 실행됩니다.
2. 스택이 비어 있으므로 마이크로 태스크가 실행됩니다: c, 그런 다음 새로운 마이크로 태스크 e가 동일한 라운드에서 실행됩니다.
3. 이제 하나의 작업: 타이머 b이(가) 먼저 대기열에 추가되었습니다.
4. 그런 다음 다음 작업: 타이머 d은 마이크로 작업 중에 대기열에 추가되었습니다.

일반적인 실수

• 생각setTimeout이 정확합니다. 지연은 최소한입니다.
• 생각 async는 또 다른 스레드를 의미합니다. 비동기 코드는 여전히 대기 사이의 기본 스레드에서 실행됩니다.
• 수면을 사용하여 순서를 수정합니다. 실제 조건을 기다리는 것이 훨씬 더 안정적이며 이는 불안정한 테스트에도 적용됩니다.
• await과 함께 forEach를 사용합니다. 항목 사이를 기다리지 않습니다. JavaScript 배열 방법을 참조하세요.
• 서버 핸들러에서 과도한 동기 작업을 수행합니다. 하나의 요청이 다른 모든 요청을 지연시킬 수 있습니다.

마무리

핵심 규칙을 기억하세요. 스택이 빌 때까지 스택을 실행하고 모든 마이크로태스크를 실행한 다음 하나의 태스크를 실행하고 반복하세요. 그 밖의 모든 것은 그것으로부터 따릅니다. 잘 이해하려면 위의 퀴즈를 직접 작성하고 종이에 결과를 예측한 다음 실행해 보세요. 하나의 오류를 파악하고 그 이유를 이해하면 어떤 다이어그램보다 더 많은 것을 배울 수 있습니다.

자주 묻는 질문

계속 학습하세요