2nd/10_Wiki/Topics/AI_and_ML/GPU Acceleration (Compositing).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-gpu-acceleration-compositing	GPU Acceleration (Compositing)	10_Wiki/Topics	verified	self	GPU compositing browser compositor hardware acceleration will-change transform-only	none	A	0.94	applied	browser gpu compositing performance frontend webgl will-change		2026-05-10	pending	language framework CSS / JavaScript Browser / Chrome / Skia

GPU Acceleration (Compositing)

매 한 줄

"매 layer 의 의 의 GPU 의 의 의 의 composite". 매 browser 의 paint → 매 layer → 매 GPU composite. 매 transform / opacity 의 의 의 cheap. 매 modern: 매 will-change, 매 contain, 매 OffscreenCanvas, 매 view transitions API.

매 핵심

매 rendering pipeline

1. Style (CSS computed).
2. Layout (geometry).
3. Paint (raster).
4. Composite (GPU).

매 layer 의 promote 조건

• transform (3D or non-default).
• opacity < 1 (with animation).
• will-change.
• <video>, <canvas>.
• position: fixed.
• filter.
• backdrop-filter.
• 매 video, iframe.

매 cheap (composite-only)

• transform: translate, scale, rotate.
• opacity.

매 expensive (paint or layout)

• top, left, width, height, margin.
• box-shadow, border-radius (animated).

매 modern API

• OffscreenCanvas (Worker).
• WebGL / WebGPU.
• View Transitions API.
• Transform Stream.
• CSS containment.

💻 패턴

Animate transform (cheap)

/* 매 ❌ expensive: layout + paint */
@keyframes badmove {
  from { left: 0; }
  to { left: 100px; }
}

/* 매 ✅ composite-only */
@keyframes goodmove {
  from { transform: translateX(0); }
  to { transform: translateX(100px); }
}

.element {
  animation: goodmove 1s;
  will-change: transform;
}

Will-change (promote layer)

.scrolling-modal {
  will-change: transform;
  /* 매 → GPU layer 의 promote */
}

/* 매 ❗ overuse 의 memory + slow */
.everything-will-change {
  will-change: transform, opacity, scroll-position;  /* ❌ */
}

Force layer (legacy hack)

.force-gpu {
  transform: translate3d(0, 0, 0);
  /* 매 or */
  transform: translateZ(0);
  backface-visibility: hidden;
}

CSS containment (paint isolation)

.card {
  contain: layout paint;
  /* 매 or */
  contain: strict;  /* 매 layout + paint + size + style */
}

content-visibility (auto)

.below-fold {
  content-visibility: auto;
  contain-intrinsic-size: 0 500px;
  /* 매 outside viewport 의 의 paint 의 skip */
}

OffscreenCanvas (worker)

// 매 main thread
const canvas = document.querySelector('canvas');
const offscreen = canvas.transferControlToOffscreen();
const worker = new Worker('render.js');
worker.postMessage({ canvas: offscreen }, [offscreen]);

// 매 render.js (worker)
self.onmessage = async ({ data }) => {
  const ctx = data.canvas.getContext('webgl2');
  // 매 render off main thread
  function loop() {
    // ...
    requestAnimationFrame(loop);
  }
  loop();
};

WebGPU (modern)

const adapter = await navigator.gpu.requestAdapter();
const device = await adapter.requestDevice();
const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('webgpu');
ctx.configure({ device, format: 'bgra8unorm' });

const pipeline = device.createRenderPipeline({...});
const encoder = device.createCommandEncoder();
const pass = encoder.beginRenderPass({...});
pass.setPipeline(pipeline);
pass.draw(3);
pass.end();
device.queue.submit([encoder.finish()]);

View Transitions API

::view-transition-old(root) {
  animation: fade-out 0.3s;
}
::view-transition-new(root) {
  animation: fade-in 0.3s;
}

async function navigate(url) {
  if (!document.startViewTransition) return location.href = url;
  document.startViewTransition(async () => {
    const html = await fetch(url).then(r => r.text());
    document.body.innerHTML = parseHTML(html);
  });
}

DevTools (layer inspection)

DevTools → Rendering → "Layer borders"
DevTools → Performance → record → see paint/composite breakdown

Detect layer count (programmatic)

function checkExcessiveLayers() {
  const elements = document.querySelectorAll('*');
  let promoted = 0;
  elements.forEach(el => {
    const cs = getComputedStyle(el);
    if (cs.transform !== 'none' || cs.willChange !== 'auto') promoted++;
  });
  if (promoted > 50) console.warn('Excessive promoted layers');
}

Animation performance

import { onINP } from 'web-vitals';
let dropFrames = 0;
let lastTime = performance.now();

function frameMonitor() {
  const now = performance.now();
  if (now - lastTime > 18) dropFrames++;  // 매 60fps = 16.67ms
  lastTime = now;
  requestAnimationFrame(frameMonitor);
}
frameMonitor();

Skia / Chrome compositor (concept)

// 매 Chrome 의 cc/ thread
// 매 main thread: paint → display lists
// 매 compositor thread: rasterize tiles → GPU draw quads
// 매 GPU process: actual GL/Metal/Vulkan calls

Hardware-accelerated video

video {
  /* 매 매 video 의 의 GPU layer 의 의 직접 */
  transform: translateZ(0);  /* 매 hint */
}

CSS Houdini (paint worklet)

// 매 paint.js
registerPaint('checkerboard', class {
  paint(ctx, geom, props) {
    const size = props.get('--size').value;
    for (let y = 0; y < geom.height; y += size) {
      for (let x = 0; x < geom.width; x += size) {
        ctx.fillStyle = (x/size + y/size) % 2 ? 'black' : 'white';
        ctx.fillRect(x, y, size, size);
      }
    }
  }
});

.element {
  background: paint(checkerboard);
  --size: 20;
}

React optimization

// 매 transform-only animation
<motion.div animate={{ x: 100, opacity: 0.5 }} transition={{ duration: 0.3 }}>
  Content
</motion.div>
// 매 framer-motion 의 transform-based by default

매 결정 기준

상황	Approach
Animation	transform / opacity only
Heavy graphics	OffscreenCanvas / WebGPU
Page transition	View Transitions API
Long page	content-visibility
Component isolate	contain
Custom paint	Houdini

기본값: 매 transform/opacity 의 animate + 매 will-change 의 strategic + 매 contain + 매 OffscreenCanvas heavy + 매 WebGPU modern.

🔗 Graph

• 부모: Browser-Rendering · Performance
• 변형: Compositing
• 응용: Will-Change · OffscreenCanvas · WebGPU
• Adjacent: Core Web Vitals Optimization (INP, LCP 개선) · Compute-Shader · View-Transitions

🤖 LLM 활용

언제: 매 frontend perf optim. 매 60fps animation. 매 heavy canvas. 언제 X: 매 simple static page.

❌ 안티패턴

• Animate top/left: 매 jank.
• will-change everywhere: 매 memory blow.
• translate3d hack 의 모든: 매 deprecated.
• Heavy paint per frame: 매 60fps 의 lose.
• No DevTools layer inspection: 매 invisible bug.

🧪 검증 / 중복

• Verified (MDN, web.dev, Chrome rendering team, Skia).
• 신뢰도 A.

🕓 Changelog

날짜	변경
2026-05-08	Phase 1
2026-05-10	Manual cleanup — pipeline + 매 transform / will-change / contain / OffscreenCanvas / WebGPU code