2nd/10_Wiki/Topic_Programming/Architecture/Browser.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-browser	Browser	10_Wiki/Topics	verified	self	Web Browser Browser Internals Rendering Engine	none	A	0.9	applied	browser web rendering javascript networking		2026-05-10	pending	language framework C++/Rust 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

<!-- 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

// 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

// 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)

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

// 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

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

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)

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