2nd/10_Wiki/Topic_Programming/AI_and_ML/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	Browser Main Thread UI Thread JS Main Thread Event Loop Thread	none	A	0.94	applied	web-performance browser event-loop inp web-worker rendering javascript		2026-05-10	pending	language framework javascript|typescript browser|web-worker

Main Thread

한 줄: 브라우저에서 JS 실행·DOM 파싱·layout·paint·이벤트 처리가 모두 도는 단일 스레드 — 막히면 INP·반응성 즉사.

핵심

• Single-threaded: JS는 main thread 위 event loop. 한 task가 길면 모두 정지.
• Long task: ≥50ms 작업 → INP 악화. Core Web Vitals 핵심 지표.
• Pipeline: parse HTML → CSSOM → JS 실행 → layout → paint → composite. 매 frame 16.7ms (60fps) 안에 끝나야.
• 분리 가능 작업: heavy compute (CSV parse, image proc, crypto, ML) → Web Worker. DOM은 worker 불가.
• 도구: Chrome DevTools Performance, PerformanceObserver('longtask'), scheduler.yield() (2025+).

결정 기준

작업	처리
DOM 조작	main thread (필수) — batch + virtual DOM
JSON parse < 1MB	main, OK
JSON parse > 5MB	Web Worker
이미지 리사이즈	OffscreenCanvas + Worker
ML 추론	Worker + WebGPU/WASM
큰 list 렌더	virtualization (react-window, TanStack Virtual)
긴 루프	scheduler.yield() 또는 chunked + setTimeout(0)
우선순위 제어	scheduler.postTask({priority:'background'})

💻 패턴

Long task 측정

new PerformanceObserver((list) => {
  for (const e of list.getEntries()) console.warn("longtask", e.duration, e);
}).observe({ type: "longtask", buffered: true });

Yield to main thread (2025+ standard)

async function processItems(items) {
  for (const item of items) {
    doWork(item);
    if (navigator.scheduling?.isInputPending() || performance.now() % 50 < 1) {
      await scheduler.yield();      // 또는 await new Promise(r => setTimeout(r, 0))
    }
  }
}

Web Worker (module)

// main.js
const worker = new Worker(new URL("./heavy.worker.js", import.meta.url), { type: "module" });
worker.postMessage({ csv: largeText });
worker.onmessage = (e) => render(e.data);

// heavy.worker.js
import Papa from "papaparse";
self.onmessage = ({ data }) => {
  const parsed = Papa.parse(data.csv, { header: true });
  self.postMessage(parsed.data);
};

OffscreenCanvas (이미지/그래픽 워커화)

const canvas = document.querySelector("canvas").transferControlToOffscreen();
const w = new Worker("draw.worker.js");
w.postMessage({ canvas }, [canvas]);  // transfer

Scheduler API 우선순위

scheduler.postTask(() => analytics.flush(), { priority: "background" });
scheduler.postTask(() => updateBadge(), { priority: "user-blocking" });

React 18+ transitions (cooperative)

import { useTransition, useDeferredValue } from "react";
const [isPending, startTransition] = useTransition();
const onChange = (v) => {
  setQuery(v);                                  // urgent
  startTransition(() => setResults(filter(v))); // non-urgent
};

Long task 분할 (chunk)

function chunked(items, fn, chunkSize = 100) {
  return new Promise((resolve) => {
    let i = 0;
    function step() {
      const end = Math.min(i + chunkSize, items.length);
      for (; i < end; i++) fn(items[i]);
      if (i < items.length) setTimeout(step, 0); else resolve();
    }
    step();
  });
}

🔗 Graph

• 상위: Web-Performance · Browser-Internals · Event-Loop
• 관련: Web-Worker · Service-Worker · OffscreenCanvas · INP · Core Web Vitals Optimization (INP, LCP, CLS) · React-Concurrent · Scheduler API
• 도구: Lighthouse

🤖 LLM 활용

• DevTools flame chart를 LLM에 붙여 "어떤 long task가 INP를 망치는지" 해석 요청.
• 코드 리뷰 prompt: "이 함수가 main thread를 블록할 가능성 분석".

❌ 안티패턴

• while(true) 폴링 — 메인 스레드 점유. requestAnimationFrame/setInterval/이벤트.
• 거대 JSON sync parse — Worker로 이동, streaming JSON (oboe, JSON.parseAsync 제안 등).
• DOM 조작을 루프 안에서 N번 — DocumentFragment/배치 + IntersectionObserver.
• 무거운 라이브러리 main bundle — code split, dynamic import.
• Worker 남용 — 작은 작업은 postMessage 오버헤드가 손해. 임계값 측정.
• alert/confirm/prompt — modal sync block. 커스텀 dialog로 대체.

🧪 검증 / 중복

• 중복: Event-Loop, Web-Worker 별도 — 본 문서는 main thread 관점 허브.
• 검증: Lighthouse INP, RUM (web-vitals lib), Chrome DevTools "Performance" 탭 long tasks bar.

🕓 Changelog

• 2026-05-08 | Phase 1 — 자동 시드.
• 2026-05-10 | Manual cleanup — scheduler.yield, Worker, OffscreenCanvas, React transition 패턴 정리, INP 결정 기준 추가.