Files

T

koriweb d8a80f6272 chore(wiki): dangling 링크 canonical 정규화 (768파일/1200건)

이름만 다른(표기 변형) [[위키링크]]를 대상 문서의 canonical 제목으로 치환해
끊겼던 1,200개 링크를 연결. 제목/파일명 정규화 일치만 적용하고 별칭 매칭은
과병합 위험으로 제외(애매성 가드). 원본은 _link_reconcile_backup/ 에 백업.
도구: Datacollect/scripts/link_reconcile_apply.mjs

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

2026-06-08 12:24:15 +09:00

5.1 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

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 결정 기준 추가.

5.1 KiB Raw Blame History