2nd/10_Wiki/Topics/Frontend/메인 스레드 (Main Thread).md

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

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
wiki-2026-0508-메인-스레드-main-thread	메인 스레드 (Main Thread)	10_Wiki/Topics	verified	self	Main Thread UI Thread JavaScript Thread	none	A	0.9	applied	browser performance javascript frontend		2026-05-10	pending	language framework javascript browser

메인 스레드 (Main Thread)

매 한 줄

"매 single thread 매 JS, layout, paint, event 매 모두 처리". 매 50ms+ task — 매 long task — 매 jank/INP 악화. 매 해결 = 매 break up + Web Worker (CPU) + scheduler.yield (cooperative) + offscreen canvas (rendering).

매 핵심

매 main thread 책임

• JavaScript 실행.
• Style 계산.
• Layout (reflow).
• Paint.
• Composite 매 일부 (대부분 GPU).
• Event dispatching.
• rAF callbacks.

매 long task

• >50ms task — Lighthouse "long task" — 매 user input 차단.
• TBT (Total Blocking Time) — long task time 합산.
• INP (Interaction to Next Paint, 2024 Web Vital) — 매 main thread block 매 직접 영향.

매 yielding 전략

1. setTimeout(fn, 0) — 매 macrotask — 매 input priority 의 X.
2. requestIdleCallback — 매 idle 만 — 매 best effort.
3. scheduler.postTask (priority) — 매 modern.
4. scheduler.yield() (Chrome 129+) — 매 explicit yield + continue.
5. MessageChannel postMessage — 매 lower latency.
6. Web Worker — 매 다른 thread — 매 CPU heavy.
7. OffscreenCanvas — 매 worker 매 렌더링.

매 응용

1. Heavy parsing (CSV, JSON 매 수십 MB).
2. ML inference (TensorFlow.js — Worker).
3. Image processing — OffscreenCanvas.
4. List rendering — virtualization + chunking.

💻 패턴

Long task break up — scheduler.yield

async function processItems(items) {
  for (const item of items) {
    process(item);
    if (navigator.scheduling?.isInputPending() ||
        performance.now() - lastYield > 50) {
      await scheduler.yield();  // 매 main thread 풀어줌
      lastYield = performance.now();
    }
  }
}

scheduler.postTask (priority)

scheduler.postTask(() => doImportant(), { priority: 'user-blocking' });
scheduler.postTask(() => doIdle(),       { priority: 'background' });

Web Worker (CPU heavy)

// main.js
const worker = new Worker(new URL('./worker.js', import.meta.url), { type: 'module' });
worker.postMessage({ data: largeArray });
worker.onmessage = e => console.log('result', e.data);

// worker.js
self.onmessage = e => {
  const result = heavyComputation(e.data.data);
  self.postMessage(result);
};

Comlink (worker RPC)

// main.js
import * as Comlink from 'comlink';
const api = Comlink.wrap(new Worker('./worker.js'));
const result = await api.heavyTask(largeData);

// worker.js
import * as Comlink from 'comlink';
Comlink.expose({
  heavyTask: data => heavyComputation(data)
});

OffscreenCanvas (worker render)

// main
const canvas = document.querySelector('canvas');
const offscreen = canvas.transferControlToOffscreen();
worker.postMessage({ canvas: offscreen }, [offscreen]);

// worker
self.onmessage = e => {
  const ctx = e.data.canvas.getContext('2d');
  function frame() {
    ctx.fillRect(...);
    requestAnimationFrame(frame);
  }
  frame();
};

Chunked processing (rAF)

function processChunked(items, chunkSize = 100) {
  let i = 0;
  function chunk() {
    const end = Math.min(i + chunkSize, items.length);
    for (; i < end; i++) process(items[i]);
    if (i < items.length) requestAnimationFrame(chunk);
  }
  chunk();
}

isInputPending (yield 시점 결정)

function workLoop(deadline) {
  while (tasks.length && !navigator.scheduling.isInputPending()) {
    tasks.shift()();
  }
  if (tasks.length) scheduler.postTask(() => workLoop());
}

React 18 transition (yield 자동)

import { useTransition } from 'react';

const [isPending, startTransition] = useTransition();
const onChange = e => {
  setQuery(e.target.value);  // 매 urgent
  startTransition(() => {
    setResults(filter(e.target.value));  // 매 interruptible
  });
};

Long Animation Frames API (LoAF) 측정

new PerformanceObserver(list => {
  list.getEntries().forEach(e => {
    console.log('LoAF:', e.duration, 'ms', e.scripts);
  });
}).observe({ type: 'long-animation-frame', buffered: true });

매 결정 기준

작업	처리
Heavy CPU (parse, ML inference)	Web Worker
List 1000+ items render	virtualization + chunking
Canvas animation heavy	OffscreenCanvas in Worker
User-blocking + background mix	scheduler.postTask priority
React state update non-urgent	useTransition
Iterative loop break up	scheduler.yield() 매 50ms
Idle prefetch	requestIdleCallback

기본값: CPU heavy = Worker + Comlink, list = virtual + chunked, React urgent/non = useTransition, loop = scheduler.yield.

🔗 Graph

• 부모: Web Performance
• 변형: Web Worker · OffscreenCanvas · Service Worker
• 응용: React Concurrent
• Adjacent: Long Animation Frames · scheduler API · Comlink

🤖 LLM 활용

언제: INP 디버깅, "왜 input 매 lag", Worker offload 결정. 언제 X: 매 specific framework scheduler internals (React fiber) — 매 framework docs.

❌ 안티패턴

• while(true) heavy loop: 매 page freeze.
• Sync XHR: 매 main thread block — 매 deprecated.
• JSON.parse on 50MB: 매 Worker 의 사용.
• setTimeout(0) 매 yield 가정: 매 input priority 의 X — 매 scheduler.yield.
• Worker 매 message 매 large clone: 매 transferable (ArrayBuffer.transfer) 의 사용.

🧪 검증 / 중복

• Verified (web.dev INP/Long Tasks, Chrome DevRel scheduler API, MDN Web Workers).
• 신뢰도 A.

🕓 Changelog

날짜	변경
2026-05-08	Phase 1
2026-05-10	Manual cleanup — yielding + Worker + OffscreenCanvas