Files

T

Antigravity Agent 9a135bd19d docs(10_Wiki): Topic_Business/General/Graphic/Programming을 Topics/ 하위로 이동

최상위 10_Wiki/Topic_*였던 4개 카테고리 폴더를 10_Wiki/Topics/Topic_* 로 재배치.
콘텐츠 변경 없음(순수 폴더 이동) — Topics/ 하위 나머지 폴더는 이미 지난 커밋에서
전부 정리된 상태(잔존 항목은 에이전트 운영 상태 및 사용자가 보존을 요청한
업데이트0615/무제 3.canvas 뿐).

2026-07-05 00:44:01 +09:00

6.0 KiB

Raw Blame History

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

title

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

Parse HTML → DOM.
Parse CSS → CSSOM.
Style — match rules → ComputedStyle.
Layout — geometry computation.
Paint — layer 별 display list.
Composite — GPU 가 layer 합성.

매 JS engine tiers (V8)

Ignition (interpreter) → Sparkplug (baseline JIT) → Maglev (mid-tier) → TurboFan (optimizing JIT).
매 hot function 만 점진적 promotion.

매 응용

Web app development: 매 performance budgeting.
Extension / DevTools: 매 internal API.
Embedded webview: 매 Electron, Tauri, CEF.
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

6.0 KiB Raw Blame History