2nd/10_Wiki/Topics/Frontend/OffscreenCanvas와 Web Worker를 활용한 메인 스레드 병목 해결.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-offscreencanvas와-web-worker를-활용한	OffscreenCanvas와 Web Worker를 활용한 메인 스레드 병목 해결	10_Wiki/Topics	verified	self	OffscreenCanvas Web Worker rendering off-main-thread canvas	none	A	0.9	applied	web-worker offscreencanvas performance frontend rendering		2026-05-10	pending	language framework JavaScript Web API

OffscreenCanvas와 Web Worker를 활용한 메인 스레드 병목 해결

매 한 줄

"매 main thread 의 60fps budget (16.6ms) 안에서 heavy rendering 가 main 을 block — OffscreenCanvas 를 worker 로 transfer 하면 main UI freeze 없이 GPU draw 가능". 2026 모든 주요 브라우저 (Chrome, Firefox 105+, Safari 16.4+) 가 지원. 매 game, data viz, image editor 의 핵심 패턴.

매 핵심

매 메인 스레드 병목 원인

• Heavy raster (10k+ shapes, particle).
• Image processing (filter, decode).
• Layout thrash: 매 read-write 반복.
• Synchronous JS work: 매 long task (>50ms).

매 OffscreenCanvas 가 해결

• Canvas → Worker transfer: 매 transferControlToOffscreen().
• GPU context (WebGL/WebGPU) 도 worker 가능.
• Main thread 는 input + DOM 만: 매 항상 responsive.
• requestAnimationFrame 가 worker 에도 존재.

매 응용

1. Game canvas (Three.js worker rendering).
2. Real-time data viz (D3 or visx in worker).
3. Image editor (Photoshop-like filter).
4. PDF / video frame extraction.

💻 패턴

Basic transfer + worker render loop

// main.js
const canvas = document.querySelector("canvas");
const offscreen = canvas.transferControlToOffscreen();
const worker = new Worker("./renderer.js", { type: "module" });
worker.postMessage({ canvas: offscreen }, [offscreen]);

// renderer.js (worker)
let canvas, ctx;
self.onmessage = (e) => {
  if (e.data.canvas) {
    canvas = e.data.canvas;
    ctx = canvas.getContext("2d");
    loop();
  }
};
function loop() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.fillStyle = `hsl(${(performance.now() / 10) % 360}, 80%, 50%)`;
  ctx.fillRect(50, 50, 200, 200);
  requestAnimationFrame(loop);
}

Three.js in worker

// main.js
const canvas = document.getElementById("c");
const off = canvas.transferControlToOffscreen();
const w = new Worker(new URL("./three-worker.js", import.meta.url), { type: "module" });
w.postMessage({ canvas: off, dpr: devicePixelRatio }, [off]);

// three-worker.js
import * as THREE from "three";
self.onmessage = ({ data }) => {
  const { canvas, dpr } = data;
  const renderer = new THREE.WebGLRenderer({ canvas, antialias: true });
  renderer.setPixelRatio(dpr);
  const scene = new THREE.Scene();
  const cam = new THREE.PerspectiveCamera(75, canvas.width / canvas.height);
  cam.position.z = 5;
  const cube = new THREE.Mesh(
    new THREE.BoxGeometry(),
    new THREE.MeshNormalMaterial(),
  );
  scene.add(cube);
  function tick() {
    cube.rotation.x += 0.01;
    cube.rotation.y += 0.01;
    renderer.render(scene, cam);
    requestAnimationFrame(tick);
  }
  tick();
};

Input forwarding (main → worker)

// main.js — 매 worker 는 DOM 접근 X → input event 의 forward 필요
canvas.addEventListener("pointermove", (e) => {
  worker.postMessage({
    type: "pointer",
    x: e.offsetX,
    y: e.offsetY,
  });
});
window.addEventListener("resize", () => {
  worker.postMessage({ type: "resize", w: canvas.clientWidth, h: canvas.clientHeight });
});

Resize handling in worker

// worker
self.onmessage = ({ data }) => {
  if (data.type === "resize") {
    canvas.width = data.w * devicePixelRatio;
    canvas.height = data.h * devicePixelRatio;
    cam.aspect = data.w / data.h;
    cam.updateProjectionMatrix();
  }
};

Image processing pipeline (heavy filter)

// main
const bmp = await createImageBitmap(file);
worker.postMessage({ bmp }, [bmp]); // 매 transfer ownership

// worker
self.onmessage = ({ data }) => {
  const { bmp } = data;
  const off = new OffscreenCanvas(bmp.width, bmp.height);
  const ctx = off.getContext("2d");
  ctx.drawImage(bmp, 0, 0);
  const img = ctx.getImageData(0, 0, bmp.width, bmp.height);
  // 매 heavy pixel loop — 매 main 안 막음
  for (let i = 0; i < img.data.length; i += 4) {
    img.data[i]   = 255 - img.data[i];
    img.data[i+1] = 255 - img.data[i+1];
    img.data[i+2] = 255 - img.data[i+2];
  }
  ctx.putImageData(img, 0, 0);
  off.convertToBlob().then((blob) => self.postMessage({ blob }));
};

SharedArrayBuffer for shared state (with COOP/COEP)

// main — game state shared
const sab = new SharedArrayBuffer(1024);
const state = new Float32Array(sab);
worker.postMessage({ state: sab });

// 매 worker 가 state 읽고 — 매 lock-free update
// 매 require: Cross-Origin-Opener-Policy: same-origin
//             Cross-Origin-Embedder-Policy: require-corp

매 결정 기준

작업	위치
DOM update	main thread (only)
Canvas 2D / WebGL / WebGPU draw	worker (OffscreenCanvas)
Image filter / encode	worker
Layout / scroll	main
Heavy compute (parsing, ML)	worker

기본값: rendering loop + heavy compute → worker, DOM/input → main.

🔗 Graph

• 부모: Web Worker · Performance Optimization
• 변형: SharedWorker · Service Worker · WebGPU Compute
• 응용: Three.js
• Adjacent: SharedArrayBuffer

🤖 LLM 활용

언제: canvas-heavy app 설계, main thread jank 진단, worker 통신 설계. 언제 X: 매 simple static page — 매 overhead 정당화 X.

❌ 안티패턴

• PostMessage with large object (no transfer): 매 structured clone copy → 매 GC pressure. 매 transfer list 사용.
• DOM access in worker: 매 불가능 — 매 main 으로 forward.
• Forget resize / DPR: 매 blurry canvas.
• No COOP/COEP for SAB: 매 SharedArrayBuffer 사용 X.

🧪 검증 / 중복

• Verified (MDN OffscreenCanvas, Three.js examples, Chrome Developers blog).
• 신뢰도 A.

🕓 Changelog

날짜	변경
2026-05-08	Phase 1
2026-05-10	Manual cleanup — OffscreenCanvas + worker 패턴 7개