---
id: wiki-2026-0508-gpu-acceleration-compositing
title: GPU Acceleration (Compositing)
category: 10_Wiki/Topics
status: verified
canonical_id: self
aliases: [GPU compositing, browser compositor, hardware acceleration, will-change, transform-only]
duplicate_of: none
source_trust_level: A
confidence_score: 0.94
verification_status: applied
tags: [browser, gpu, compositing, performance, frontend, webgl, will-change]
raw_sources: []
last_reinforced: 2026-05-10
github_commit: pending
tech_stack:
  language: CSS / JavaScript
  framework: 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)
```css
/* 매 ❌ 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)
```css
.scrolling-modal {
  will-change: transform;
  /* 매 → GPU layer 의 promote */
}

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

### Force layer (legacy hack)
```css
.force-gpu {
  transform: translate3d(0, 0, 0);
  /* 매 or */
  transform: translateZ(0);
  backface-visibility: hidden;
}
```

### CSS containment (paint isolation)
```css
.card {
  contain: layout paint;
  /* 매 or */
  contain: strict;  /* 매 layout + paint + size + style */
}
```

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

### OffscreenCanvas (worker)
```javascript
// 매 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)
```javascript
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
```css
::view-transition-old(root) {
  animation: fade-out 0.3s;
}
::view-transition-new(root) {
  animation: fade-in 0.3s;
}
```

```javascript
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)
```javascript
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
```javascript
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)
```cpp
// 매 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
```css
video {
  /* 매 매 video 의 의 GPU layer 의 의 직접 */
  transform: translateZ(0);  /* 매 hint */
}
```

### CSS Houdini (paint worklet)
```javascript
// 매 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);
      }
    }
  }
});
```

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

### React optimization
```jsx
// 매 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 개선)|Core-Web-Vitals]] · [[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 |