Files

T

Antigravity Agent 9a135bd19d docs(10_Wiki): Topic_Business/General/Graphic/Programming을 Topics/ 하위로 이동

최상위 10_Wiki/Topic_*였던 4개 카테고리 폴더를 10_Wiki/Topics/Topic_* 로 재배치.
콘텐츠 변경 없음(순수 폴더 이동) — Topics/ 하위 나머지 폴더는 이미 지난 커밋에서
전부 정리된 상태(잔존 항목은 에이전트 운영 상태 및 사용자가 보존을 요청한
업데이트0615/무제 3.canvas 뿐).

2026-07-05 00:44:01 +09:00

5.9 KiB

Raw Blame History

id, title, category, status, canonical_id, aliases, duplicate_of, source_trust_level, confidence_score, verification_status, tags, raw_sources, last_reinforced, github_commit, tech_stack

title

JavaScript Async and Event Loop

매 한 줄

"매 single-threaded JS 가 매 cooperative scheduler 위에서 매 async 를 흉내낸다.". Call stack + task queue + microtask queue + render pipeline 이 매 tick 의 단위. Promise/async-await 는 매 syntactic sugar — runtime 은 매 microtask drain rule 로 결정.

매 핵심

매 Stack vs Queues

Call stack: 매 동기 frame. LIFO. 매 비어야 매 tick 진행.
Task queue (macrotask): setTimeout, setInterval, MessageChannel, I/O callback, UI event. 매 tick 당 1개 drain.
Microtask queue: Promise.then, queueMicrotask, MutationObserver. 매 tick 마지막에 매 전부 drain (재진입 포함).
Animation frame queue: requestAnimationFrame. 매 paint 직전.
Render steps: style → layout → paint → composite. 매 vsync 와 매 동기화.

매 Tick 순서 (browser)

매 task queue 에서 매 1 task pop → 실행.
매 microtask queue 매 전부 drain (recursively).
매 rAF callbacks.
매 render (필요 시).
매 idle callbacks (requestIdleCallback).
매 다음 tick.

매 Node.js phases

timers → pending callbacks → idle/prepare → poll → check (setImmediate) → close → microtask drain (between phases since Node 11).
process.nextTick 는 매 microtask 보다도 매 우선.

매 응용

UI freeze 방지 — 매 long task 를 매 chunk + scheduler.yield().
Race condition 분석 — 매 await 사이 매 state mutation 가능.
Server backpressure — 매 event loop lag (perf_hooks.monitorEventLoopDelay).

💻 패턴

Microtask vs Macrotask 순서

console.log('1');
setTimeout(() => console.log('2'), 0);
Promise.resolve().then(() => console.log('3'));
queueMicrotask(() => console.log('4'));
console.log('5');
// 1, 5, 3, 4, 2  — microtasks drain before next macrotask

Long task chunking with scheduler.yield (2026)

async function processLargeArray(items) {
  for (let i = 0; i < items.length; i++) {
    doWork(items[i]);
    if (i % 100 === 0 && 'scheduler' in window) {
      await scheduler.yield();          // Chrome 129+ stable
    }
  }
}

Promise.allSettled with concurrency limit

async function mapLimit(items, limit, fn) {
  const results = new Array(items.length);
  let cursor = 0;
  const workers = Array.from({ length: limit }, async () => {
    while (cursor < items.length) {
      const i = cursor++;
      results[i] = await fn(items[i]).catch(e => ({ error: e }));
    }
  });
  await Promise.all(workers);
  return results;
}

AbortController for cancellation

const ac = new AbortController();
fetch('/slow', { signal: ac.signal })
  .then(r => r.json())
  .catch(e => { if (e.name === 'AbortError') console.log('cancelled'); });
setTimeout(() => ac.abort(), 3000);

Async iterator drain

async function* readChunks(stream) {
  const reader = stream.getReader();
  try {
    while (true) {
      const { done, value } = await reader.read();
      if (done) return;
      yield value;
    }
  } finally { reader.releaseLock(); }
}

for await (const chunk of readChunks(resp.body)) {
  process(chunk);
}

Avoid microtask starvation

// BAD — recursive Promise.resolve() blocks rendering
function bad() {
  Promise.resolve().then(bad);   // browser never paints
}
// GOOD — use setTimeout(0) or MessageChannel for yielding
function good() {
  setTimeout(good, 0);
}

Event loop lag monitor (Node)

import { monitorEventLoopDelay } from 'node:perf_hooks';
const h = monitorEventLoopDelay({ resolution: 20 });
h.enable();
setInterval(() => {
  console.log('p99 lag ms', h.percentile(99) / 1e6);
  h.reset();
}, 1000);

Top-level await (ESM)

// module.mjs
const config = await fetch('/config.json').then(r => r.json());
export default config;
// importer awaits parent module graph — beware deadlock cycles

매 결정 기준

상황	Approach
매 즉시 yield 필요	queueMicrotask / Promise.resolve().then
매 paint 후 작업	requestAnimationFrame
매 idle 시간 작업	requestIdleCallback / scheduler.postTask('background')
매 long task chunking	scheduler.yield() (modern)
매 cancellation	AbortController + signal
매 backpressure 측정	perf_hooks.monitorEventLoopDelay

기본값: async/await + AbortController. 매 long task 는 매 scheduler.yield. 매 nextTick / process.nextTick 남용 X.

🔗 Graph

부모: JavaScript · Concurrency
변형: Browser Rendering
응용: React Concurrent Mode · Web Worker (웹 워커)
Adjacent: AbortController · Streams

🤖 LLM 활용

언제: 매 race / ordering bug 분석, 매 long-task profiling, 매 SSR streaming 설계. 언제 X: 매 CPU-bound 작업 — 매 worker / native 로 offload.

❌ 안티패턴

Recursive microtask loop: 매 rendering starvation.
await in tight for loop: 매 직렬화. 매 Promise.all 사용.
forgotten unhandled rejection: 매 process crash (Node 15+).
setTimeout(fn, 0) for ordering: 매 microtask 와 매 race — queueMicrotask 사용.

🧪 검증 / 중복

Verified (HTML spec — Event Loop Processing Model, Node.js docs).
신뢰도 A.

🕓 Changelog

날짜	변경
2026-05-08	Phase 1
2026-05-10	Manual cleanup — 매 task/microtask order + scheduler.yield 패턴

5.9 KiB Raw Blame History