2nd/10_Wiki/Topics/Architecture/Browser.md

---
id: wiki-2026-0508-browser
title: Browser
category: 10_Wiki/Topics
status: verified
canonical_id: self
aliases: [Web Browser, Browser Internals, Rendering Engine]
duplicate_of: none
source_trust_level: A
confidence_score: 0.9
verification_status: applied
tags: [browser, web, rendering, javascript, networking]
raw_sources: []
last_reinforced: 2026-05-10
github_commit: pending
tech_stack:
  language: C++/Rust
  framework: Chromium/Gecko/WebKit
---

# Browser

## 매 한 줄
> **"매 browser = networking stack + parsing + rendering + JS engine + sandbox 의 거대한 OS-like 시스템."**. 매 2026 현재 Chromium-derived (Chrome, Edge, Brave, Arc) 가 ~70% market share, Firefox/Gecko 와 Safari/WebKit 이 나머지. 매 process-per-site isolation, GPU-accelerated compositing, V8 의 Sparkplug+Maglev+TurboFan tier 가 modern baseline.

## 매 핵심

### 매 multi-process architecture
- **Browser process**: 매 UI, networking, IPC orchestration.
- **Renderer process**: 매 site-per-process — Blink + V8.
- **GPU process**: 매 compositing, WebGL/WebGPU.
- **Network service**: 매 별도 process — credential isolation.
- **Utility processes**: 매 audio, video decode, storage.

### 매 rendering pipeline
1. **Parse** HTML → DOM.
2. **Parse** CSS → CSSOM.
3. **Style** — match rules → ComputedStyle.
4. **Layout** — geometry computation.
5. **Paint** — layer 별 display list.
6. **Composite** — GPU 가 layer 합성.

### 매 JS engine tiers (V8)
- **Ignition** (interpreter) → **Sparkplug** (baseline JIT) → **Maglev** (mid-tier) → **TurboFan** (optimizing JIT).
- 매 hot function 만 점진적 promotion.

### 매 응용
1. **Web app development**: 매 performance budgeting.
2. **Extension / DevTools**: 매 internal API.
3. **Embedded webview**: 매 Electron, Tauri, CEF.
4. **Headless**: 매 Puppeteer, Playwright scraping/test.

## 💻 패턴

### Performance: Critical Rendering Path
```html
<!-- inline above-the-fold CSS, defer non-critical -->
<style>/* critical CSS here */</style>
<link rel="preload" href="/fonts/main.woff2" as="font" crossorigin>
<link rel="stylesheet" href="/non-critical.css" media="print" onload="this.media='all'">
<script type="module" src="/app.js" defer></script>
```

### Avoid layout thrash
```javascript
// BAD — read/write/read/write triggers sync layouts
boxes.forEach(b => {
  const w = b.offsetWidth;     // forces layout
  b.style.width = (w * 2) + 'px'; // invalidates
});

// GOOD — batch reads then writes
const widths = boxes.map(b => b.offsetWidth);
boxes.forEach((b, i) => b.style.width = (widths[i] * 2) + 'px');
```

### Service worker — offline + cache
```javascript
// sw.js
self.addEventListener('install', e => {
  e.waitUntil(caches.open('v1').then(c => c.addAll([
    '/', '/app.js', '/styles.css'
  ])));
});
self.addEventListener('fetch', e => {
  e.respondWith(
    caches.match(e.request).then(r => r || fetch(e.request))
  );
});
```

### Intersection observer (lazy load)
```javascript
const io = new IntersectionObserver(entries => {
  for (const e of entries) {
    if (e.isIntersecting) {
      e.target.src = e.target.dataset.src;
      io.unobserve(e.target);
    }
  }
}, { rootMargin: '200px' });
document.querySelectorAll('img[data-src]').forEach(img => io.observe(img));
```

### Web Workers — off-main-thread
```javascript
// main.js
const w = new Worker('worker.js', { type: 'module' });
w.postMessage({ buffer: bigArray }, [bigArray.buffer]); // transfer, not copy
w.onmessage = e => console.log(e.data);

// worker.js
onmessage = e => {
  const result = heavyCompute(e.data.buffer);
  postMessage(result);
};
```

### Performance API — measure real users
```javascript
new PerformanceObserver(list => {
  for (const entry of list.getEntries()) {
    if (entry.name === 'LCP') sendBeacon('lcp', entry.startTime);
    if (entry.entryType === 'layout-shift') sendBeacon('cls', entry.value);
    if (entry.entryType === 'event') sendBeacon('inp', entry.duration);
  }
}).observe({ type: 'largest-contentful-paint', buffered: true });
```

### CSP header
```http
Content-Security-Policy: default-src 'self'; script-src 'self' 'sha256-AbCd...';
  style-src 'self' 'unsafe-inline'; img-src 'self' data: https:; frame-ancestors 'none';
```

### WebGPU compute (modern)
```javascript
const adapter = await navigator.gpu.requestAdapter();
const device = await adapter.requestDevice();
const shader = device.createShaderModule({ code: `
  @group(0) @binding(0) var<storage, read_write> v: array<f32>;
  @compute @workgroup_size(64) fn main(@builtin(global_invocation_id) g: vec3u) {
    v[g.x] = v[g.x] * 2.0;
  }`});
// ... pipeline + dispatch
```

## 매 결정 기준
| 상황 | Approach |
|---|---|
| Hydration TTI 느림 | islands / partial hydration (Astro, Qwik) |
| Heavy compute on UI thread | Web Worker / WebAssembly |
| Repeated tiny renders | requestAnimationFrame batch |
| Need GPU for ML inference | WebGPU + ONNX Runtime Web |
| Cross-origin embed | iframe + CSP frame-ancestors |

**기본값**: HTTP/3 + service worker cache + defer non-critical JS + Web Vitals monitoring.

## 🔗 Graph
- 변형: [[Chromium]] · [[WebKit]]
- 응용: [[Single_Page_Application]] · [[PWA]] · [[Electron]]
- Adjacent: [[V8]] · [[WebAssembly]] · [[WebGPU]] · [[Service_Worker]]

## 🤖 LLM 활용
**언제**: web perf 최적화, browser API 선택, rendering pipeline 디버깅.
**언제 X**: server-side rendering 내부 (Node/Bun 영역).

## ❌ 안티패턴
- **document.write**: 매 parser blocking — 절대 X.
- **Synchronous XHR**: 매 main thread freeze — deprecated.
- **Layout thrash loop**: 매 read-write 교차 → forced sync layouts.
- **Massive bundle (>1MB JS)**: 매 mobile TTI 폭망 — code splitting 필수.
- **Too many compositor layers**: 매 will-change 남발 → GPU memory exhaustion.

## 🧪 검증 / 중복
- Verified (web.dev/architecture, Chromium design docs 2024, V8 blog 2025).
- 신뢰도 A.

## 🕓 Changelog
| 날짜 | 변경 |
|---|---|
| 2026-05-08 | Phase 1 |
| 2026-05-10 | Manual cleanup — multi-process arch, rendering pipeline, modern web APIs |