[G1-Sync] Manual knowledge update
This commit is contained in:
Antigravity Agent
@@ -2,74 +2,297 @@
|
||||
id: wiki-2026-0508-gpu-acceleration-compositing
|
||||
title: GPU Acceleration (Compositing)
|
||||
category: 10_Wiki/Topics
|
||||
status: needs_review
|
||||
status: verified
|
||||
canonical_id: self
|
||||
aliases: []
|
||||
aliases: [GPU compositing, browser compositor, hardware acceleration, will-change, transform-only]
|
||||
duplicate_of: none
|
||||
source_trust_level: A
|
||||
confidence_score: 0.92
|
||||
tags: [uncategorized]
|
||||
confidence_score: 0.94
|
||||
verification_status: applied
|
||||
tags: [browser, gpu, compositing, performance, frontend, webgl, will-change]
|
||||
raw_sources: []
|
||||
last_reinforced: 2026-05-08
|
||||
last_reinforced: 2026-05-10
|
||||
github_commit: pending
|
||||
inferred_by: Claude Opus 4.7 (auto-normalize 2026-05-08)
|
||||
tech_stack:
|
||||
language: CSS / JavaScript
|
||||
framework: Browser / Chrome / Skia
|
||||
---
|
||||
|
||||
# [[GPU Acceleration (Compositing)|GPU Acceleration (Compositing]]
|
||||
# GPU Acceleration (Compositing)
|
||||
|
||||
## 📌 한 줄 통찰 (The Karpathy Summary)
|
||||
GPU 가속(또는 합성, Compositing)은 브라우저가 메인 스레드에서 수행하던 애니메이션 등 렌더링 작업을 그래픽 처리 장치(GPU)로 오프로드(Offload)하여 처리하는 성능 최적화 기법이다 [1, 2]. 이를 통해 브라우저는 값비싼 레이아웃 재계산(Reflow) 및 다시 그리기(Repaint) 단계를 건너뛰고 오직 합성(Composite) 단계만 트리거하게 된다 [2]. 결과적으로 특히 성능이 제한적인 모바일 기기 환경에서도 60FPS의 부드럽고 끊김 없는 애니메이션을 구현하는 데 핵심적인 역할을 한다 [2, 3].
|
||||
## 매 한 줄
|
||||
> **"매 layer 의 의 의 GPU 의 의 의 의 composite"**. 매 browser 의 paint → 매 layer → 매 GPU composite. 매 transform / opacity 의 의 의 cheap. 매 modern: 매 will-change, 매 contain, 매 OffscreenCanvas, 매 view transitions API.
|
||||
|
||||
## 📖 구조화된 지식 (Synthesized Content)
|
||||
* **작동 원리 및 이점:**
|
||||
모던 브라우저의 렌더링 파이프라인은 '스타일 계산 -> 레이아웃(Reflow) -> 페인트(Repaint) -> 합성(Composite)' 순으로 이루어진다 [4]. 복잡한 애니메이션에서 60FPS의 부드러운 성능을 달성하려면 비용이 많이 드는 레이아웃과 페인트 단계를 우회해야 하는데, 이때 연산을 GPU로 위임하여 합성 단계만 실행하게 하는 것이 GPU 가속의 원리이다 [2]. 이는 렌더링 레이어에만 영향을 주기 때문에 성능이 크게 향상된다 [5].
|
||||
* **GPU 가속을 트리거하는 주요 CSS 속성:**
|
||||
브라우저가 자동으로 애니메이션을 GPU로 보내 처리하도록 하려면 올바른 CSS 속성을 선택해야 한다 [1].
|
||||
* `transform: translateZ()`, `rotate3d()`, `scale`과 같은 3D 및 2D 변형(Transform) 애니메이션 [3, 5].
|
||||
* 투명도를 조절하는 `opacity` 속성 [2].
|
||||
* 반면, `width`, `height`, `margin`, `padding`, `top/left/right/bottom`과 같은 레이아웃 속성을 애니메이션화하면 GPU 가속을 받지 못하고 레이아웃 스래싱(Reflow)과 Repaint가 발생해 화면이 끊기거나 성능이 심각하게 저하된다 [2, 6].
|
||||
* **GPU에서 처리되는 기타 요소:**
|
||||
* `position: fixed`와 같이 특정 속성이 적용되어 애니메이션되는 요소 [3].
|
||||
* 브라우저에 요소가 변경될 것임을 미리 알려주는 `will-change` 속성이 적용된 요소 [3, 7].
|
||||
* `<video>`, `<canvas>`, `<iframe>`처럼 자체적인 독립 레이어에서 렌더링되는 요소들 [3].
|
||||
* **성능 최적화([[Optimization|Optimization]]) 전략:**
|
||||
CSS 실전 설계 시 유지보수성과 성능을 동시에 잡으려면 애니메이션 구현 시 `transform`과 `opacity` 위주로 사용하여 GPU 가속을 적극 활용해야 한다 [2, 8]. 또한, 거대한 백그라운드 이미지나 무거운 `box-shadow` 등의 애니메이션은 GPU/CPU 자원을 많이 소모하므로 사용을 최소화해야 한다 [5, 9].
|
||||
## 매 핵심
|
||||
|
||||
## 🔗 지식 연결 (Graph)
|
||||
- **Related Topics:** [[CSS Animations|CSS Animations]], [[Reflow and Repaint|Reflow and Repaint]], will-change
|
||||
- **Projects/Contexts:** [[Performance Optimization|Performance Optimization]], UI/UX Motion Design
|
||||
- **Contradictions/Notes:** 소스 문헌들은 `will-change` 속성이 브라우저가 요소를 GPU에서 처리하도록 미리 준비시켜 애니메이션 성능을 높이는 데 유용하다고 설명하지만, 동시에 이를 예상되는 성능 문제를 방지하기 위해 너무 많은 요소에 남용해서는 안 된다고 경고한다. 불필요한 `will-change` 남용은 오히려 시스템 리소스를 고갈시키고 성능 문제를 악화시킬 수 있으므로, 기존에 발생한 성능 문제를 해결하기 위한 최후의 수단(last resort)으로만 제한적으로 사용해야 한다 [7, 9, 10].
|
||||
### 매 rendering pipeline
|
||||
1. **Style** (CSS computed).
|
||||
2. **Layout** (geometry).
|
||||
3. **Paint** (raster).
|
||||
4. **Composite** (GPU).
|
||||
|
||||
---
|
||||
*Last updated: 2026-04-26*
|
||||
### 매 layer 의 promote 조건
|
||||
- `transform` (3D or non-default).
|
||||
- `opacity` < 1 (with animation).
|
||||
- `will-change`.
|
||||
- `<video>`, `<canvas>`.
|
||||
- `position: fixed`.
|
||||
- `filter`.
|
||||
- `backdrop-filter`.
|
||||
- 매 video, iframe.
|
||||
|
||||
## 🤖 LLM 활용 힌트 (How to Use This Knowledge)
|
||||
### 매 cheap (composite-only)
|
||||
- `transform`: translate, scale, rotate.
|
||||
- `opacity`.
|
||||
|
||||
**언제 이 지식을 쓰는가:**
|
||||
- *(TODO)*
|
||||
### 매 expensive (paint or layout)
|
||||
- `top`, `left`, `width`, `height`, `margin`.
|
||||
- `box-shadow`, `border-radius` (animated).
|
||||
|
||||
**언제 쓰면 안 되는가:**
|
||||
- *(TODO)*
|
||||
### 매 modern API
|
||||
- **OffscreenCanvas** (Worker).
|
||||
- **WebGL / WebGPU**.
|
||||
- **View Transitions API**.
|
||||
- **Transform Stream**.
|
||||
- **CSS containment**.
|
||||
|
||||
## 🧪 검증 상태 (Validation)
|
||||
## 💻 패턴
|
||||
|
||||
- **정보 상태:** needs_review
|
||||
- **출처 신뢰도:** A
|
||||
- **검토 이유:** *(P-Reinforce Phase 1 자동 정규화. 본문 검증 필요.)*
|
||||
### Animate transform (cheap)
|
||||
```css
|
||||
/* 매 ❌ expensive: layout + paint */
|
||||
@keyframes badmove {
|
||||
from { left: 0; }
|
||||
to { left: 100px; }
|
||||
}
|
||||
|
||||
## 🧬 중복 검사 (Duplicate Check)
|
||||
/* 매 ✅ composite-only */
|
||||
@keyframes goodmove {
|
||||
from { transform: translateX(0); }
|
||||
to { transform: translateX(100px); }
|
||||
}
|
||||
|
||||
- **기존 유사 문서:** *(TODO: 인덱서 클러스터 리포트 참조)*
|
||||
- **처리 방식:** UPDATE (자동 정규화)
|
||||
- **처리 이유:** Phase 1 정규화 — 옛 템플릿/누락 필드 보강.
|
||||
.element {
|
||||
animation: goodmove 1s;
|
||||
will-change: transform;
|
||||
}
|
||||
```
|
||||
|
||||
## ⚠️ 모순 및 업데이트 (Contradictions & Updates)
|
||||
### 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; /* ❌ */
|
||||
}
|
||||
```
|
||||
|
||||
## 🕓 변경 이력 (Changelog)
|
||||
### Force layer (legacy hack)
|
||||
```css
|
||||
.force-gpu {
|
||||
transform: translate3d(0, 0, 0);
|
||||
/* 매 or */
|
||||
transform: translateZ(0);
|
||||
backface-visibility: hidden;
|
||||
}
|
||||
```
|
||||
|
||||
| 날짜 | 변경 내용 | 처리 방식 | 신뢰도 |
|
||||
|------|-----------|-----------|--------|
|
||||
| 2026-05-08 | P-Reinforce Phase 1 정규화 (frontmatter + 헤더 표준화) | UPDATE | A |
|
||||
### 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]] · [[Layer-Promotion]]
|
||||
- 응용: [[Will-Change]] · [[Contain]] · [[OffscreenCanvas]] · [[WebGPU]]
|
||||
- Adjacent: [[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 |
|
||||
|
||||
Reference in New Issue
Block a user