[G1-Sync] Manual knowledge update

2026-05-10 22:08:15 +09:00
parent 21ac3ed255
commit 504fd5fb42
3011 changed files with 380280 additions and 206977 deletions
@@ -2,93 +2,190 @@
 id: wiki-2026-0508-chrome
 title: Chrome
 category: 10_Wiki/Topics
-status: needs_review
+status: verified
 canonical_id: self
-aliases: [P-Reinforce-AUTO-5D281C]
+aliases: [Google Chrome, Chromium]
 duplicate_of: none
 source_trust_level: A
 confidence_score: 0.9
-tags: [auto-reinforced]
+verification_status: applied
+tags: [browser, chromium, devtools, frontend, web-platform]
 raw_sources: []
-last_reinforced: 2026-04-20
-github_commit: "[P-Reinforce] Continuous Worker - Chrome"
-inferred_by: Claude Opus 4.7 (auto-normalize 2026-05-08)
+last_reinforced: 2026-05-10
+github_commit: pending
 tech_stack:
-  language: unspecified
-  framework: unspecified
+  language: JavaScript
+  framework: V8 / Blink
 ---

-# [[Chrome|Chrome]]
+# Chrome

-## 📌 한 줄 통찰 (The Karpathy Summary)
-> Chrome은 웹 성능 표준과 최신 웹 그래픽 기술을 주도하는 Google의 웹 브라우저이다 [1, 2]. 강력한 개발자 도구인 [[Chrome DevTools|Chrome DevTools]]를 제공하여 애플리케이션의 런타임 및 로드 성능을 심층적으로 분석할 수 있게 하며, WebGL 및 WebGPU와 같은 차세대 그래픽 API를 적극적으로 지원한다 [3, 4]. 또한 Chrome 사용자 환경 보고서([[CrUX|CrUX]])를 통해 실제 사용자의 성능 데이터를 수집하여 [[Core Web Vitals|Core Web Vitals]]를 측정하는 핵심적인 역할을 담당한다 [5, 6].
+## 매 한 줄
+> **"매 web platform 의 de-facto reference engine"**. Chrome 은 Blink rendering + V8 JS + multi-process architecture 의 매 dominant browser (2026 ~65% global share). 매 web standard 의 첫 ship 자, DevTools 의 industry-standard 디버깅 환경, Chromium 의 매 Edge / Brave / Arc / Opera 의 기반.

-## 📖 구조화된 지식 (Synthesized Content)
- **웹 성능 측정 및 Core Web Vitals**: Chrome은 LCP, CLS, INP(기존 FID 대체)와 같은 Core Web Vitals 지표를 브라우저 단에서 직접 측정하며, 이를 Chrome UX Report (CrUX)를 통해 필드 데이터로 수집한다 [5-7]. 최근에는 교차 출처 이미지에 대한 LCP 측정 방식이나 텍스트 강조 시의 INP 처리 방식 등 지표의 정확도를 높이기 위해 측정 방식을 지속적으로 업데이트하고 있다 [8-10].
- **Chrome DevTools 및 프로파일링**: Chrome DevTools의 Performance 패널을 통해 런타임 성능, CPU 및 네트워크 스로틀링(Throttling), 메인 스레드의 [[Flame Chart|Flame Chart]] 등을 분석할 수 있다 [11-13]. Chrome 129 버전부터는 Performance 탭에서 CrUX 필드 데이터와 로컬 데이터를 실시간으로 비교하는 Live metrics 기능이 추가되었다 [14, 15]. 또한 `about:tracing` 도구를 제공하여 `CrGpuMain`, `CrRendererMain` 등 CPU와 GPU의 저수준 활동을 나노초 단위로 정밀하게 프로파일링할 수 있다 [16-18].
- **차세대 그래픽 기술 (WebGPU 및 WebGL) 지원**: Chrome은 113 버전부터 WebGPU를 기본적으로 지원하기 시작했으며 [2], Dawn이라는 WebGPU 백엔드를 사용한다 [19]. Chrome 120~146 버전에 걸쳐 WGSL의 16비트 부동소수점(`f16`) 지원, subgroup 기능, 호환성 모드(Compatibility mode) 등 WebGPU의 기능을 지속적으로 확장하고 있다 [20-22].
- **보안 및 타이밍 제어**: [[Spectre|Spectre]] 및 Meltdown과 같은 보안 취약점에 대응하기 위해, Chrome은 `performance.now()` 및 WebGPU 타임스탬프 쿼리의 정밀도를 제한([[Quantization|Quantization]])한다 [19, 23, 24]. 교차 출처 격리(Cross-origin isolated) 상태에 따라 100 마이크로초 단위로 해상도를 낮추며, 개발자 플래그(`chrome://flags/`)를 통해서만 제한을 해제할 수 있도록 보안과 디버깅의 균형을 맞추고 있다 [19, 24, 25].
- **실험적 기능 (Origin Trials) 및 AI 도입**: 웹 페이지가 전환될 때의 소프트 내비게이션([[Soft Navigation|Soft Navigation]]s) 성능을 측정하기 위한 API 실험을 진행 중이며 [26], Speculation rules를 통해 미래의 내비게이션에 필요한 리소스를 미리 렌더링하는 기능도 지원한다 [10, 27]. 더 나아가 DevTools 내에 AI 디버깅 기능과 [[Model Context Protocol (MCP)|Model Context Protocol (MCP]] 서버를 도입하여 성능 데이터를 기반으로 코드 변경을 자동화하는 실험도 제공하고 있다 [28, 29].
+## 매 핵심

-## ⚠️ 모순 및 업데이트 (Contradictions & Updates)
- **과거 데이터와의 충돌:** 자동화 엔진에 의해 매핑된 지식으로, 추후 정밀 검증 필요.
- **정책 변화:** Graphics & Performance 분야의 자동 자산화 수행.
+### 매 architecture
+- **Multi-process**: browser, renderer (per site), GPU, network, utility — sandbox isolation
+- **Site Isolation**: each site → separate process (Spectre 방어)
+- **Blink**: rendering engine (WebKit fork)
+- **V8**: JS engine (TurboFan, Maglev, Sparkplug, Ignition tiers)
+- **Skia**: 2D graphics
+- **Mojo**: IPC

-## 🔗 지식 연결 (Graph)
- **Related Topics:** [[Chrome DevTools|Chrome DevTools]], WebGPU, Core Web Vitals, [[CrUX|CrUX]], [[WebGL|WebGL]]
- **Projects/Contexts:** [[Interop 2025|Interop 2025]], [[Baseline Project|Baseline Project]]
- **Contradictions/Notes:** 타이밍 공격(Spectre 등) 보안 문제로 인해 WebGPU의 타임스탬프 쿼리나 `EXT_disjoint_timer_query`의 해상도를 하드웨어 성능 그대로 제공하지 못하고, Chrome 자체적으로 사이트 격리 상태에 따라 정밀도를 의도적으로 낮추어(Quantization) 노출해야만 하는 한계가 존재한다 [19, 23, 24].
+### 매 DevTools panel
+- **Elements**: DOM + CSS inspect, computed, layout
+- **Console**: REPL, log, error
+- **Sources**: debugger, breakpoint, snippet
+- **Network**: request waterfall, throttling
+- **Performance**: flame chart, FPS, layout shift
+- **Application**: storage, service worker, cache, manifest
+- **Lighthouse**: audit (perf, a11y, SEO, PWA)
+- **Recorder**: user flow capture + replay

---
-*Last updated: 2026-04-19*
+### 매 key feature (2026)
+- WebGPU (stable)
+- View Transitions API
+- Speculation Rules (prerender)
+- Origin Trials (experimental opt-in)
+- Built-in Gemini Nano (on-device LLM)
+- WebAssembly GC + Tail Call

---
+### 매 응용
+1. Web 앱 dev (DevTools).
+2. Extension dev (MV3).
+3. Headless automation (Puppeteer, Playwright).
+4. Performance profiling (Lighthouse CI).
+5. PWA distribution.

-## 🤖 LLM 활용 힌트 (How to Use This Knowledge)
+## 💻 패턴

-**언제 이 지식을 쓰는가:**
- *(TODO)*
+### DevTools console snippet
+```js
+// 모든 image lazy 의 강제
+$$('img').forEach(img => img.loading = 'lazy');

-**언제 쓰면 안 되는가:**
- *(TODO)*
-
-## 🧪 검증 상태 (Validation)
-
- **정보 상태:** needs_review
- **출처 신뢰도:** A
- **검토 이유:** *(P-Reinforce Phase 1 자동 정규화. 본문 검증 필요.)*
-
-## 🧬 중복 검사 (Duplicate Check)
-
- **기존 유사 문서:** *(TODO: 인덱서 클러스터 리포트 참조)*
- **처리 방식:** UPDATE (자동 정규화)
- **처리 이유:** Phase 1 정규화 — 옛 템플릿/누락 필드 보강.
-
-## 🕓 변경 이력 (Changelog)
-
-| 날짜 | 변경 내용 | 처리 방식 | 신뢰도 |
-|------|-----------|-----------|--------|
-| 2026-05-08 | P-Reinforce Phase 1 정규화 (frontmatter + 헤더 표준화) | UPDATE | A |
-
-## 💻 코드 패턴 (Code Patterns)
-
-**패턴 1:** *(TODO: 이 프로젝트 컨벤션 반영한 구조 스켈레톤)*
-
-```text
-# TODO
+// Performance mark
+performance.mark('start');
+// ... work
+performance.mark('end');
+performance.measure('work', 'start', 'end');
+console.table(performance.getEntriesByName('work'));
 ```

-## 🤔 의사결정 기준 (Decision Criteria)
+### Lighthouse CI
+```yaml
+# .github/workflows/lighthouse.yml
+- uses: treosh/lighthouse-ci-action@v12
+  with:
+    urls: |
+      https://example.com/
+      https://example.com/about
+    uploadArtifacts: true
+    temporaryPublicStorage: true
+```

-**선택 A를 써야 할 때:**
- *(TODO)*
+### Puppeteer (headless)
+```ts
+import puppeteer from 'puppeteer';

-**선택 B를 써야 할 때:**
- *(TODO)*
+const browser = await puppeteer.launch({ headless: 'new' });
+const page = await browser.newPage();
+await page.goto('https://example.com');
+const title = await page.title();
+await page.screenshot({ path: 'shot.png', fullPage: true });
+await browser.close();
+```

-**기본값:**
-> *(TODO)*
+### Extension (MV3) — Service Worker
+```json
+// manifest.json
+{
+  "manifest_version": 3,
+  "name": "Tab Counter",
+  "version": "1.0",
+  "permissions": ["tabs", "storage"],
+  "action": { "default_popup": "popup.html" },
+  "background": { "service_worker": "sw.js" }
+}
+```

-## ❌ 안티패턴 (Anti-Patterns)
+```js
+// sw.js
+chrome.tabs.onCreated.addListener(async () => {
+  const tabs = await chrome.tabs.query({});
+  await chrome.action.setBadgeText({ text: String(tabs.length) });
+});
+```

- **[안티패턴]:** *(TODO: 무엇을 하면 안 되는가 + 이유 + 대신 무엇을)*
+### Speculation Rules (prerender)
+```html
+<script type="speculationrules">
+{
+  "prerender": [{
+    "where": { "href_matches": "/products/*" },
+    "eagerness": "moderate"
+  }]
+}
+</script>
+```
+
+### chrome:// internals (debug)
+```
+chrome://inspect            — devtools for remote / node
+chrome://flags              — experimental feature toggle
+chrome://net-internals      — network event log
+chrome://gpu                — GPU + WebGPU status
+chrome://tracing            — perfetto trace
+chrome://version            — V8 / Blink version
+```
+
+### CDP (Chrome DevTools Protocol)
+```ts
+import CDP from 'chrome-remote-interface';
+
+const client = await CDP();
+const { Network, Page } = client;
+await Network.enable();
+await Page.enable();
+Network.requestWillBeSent((params) => console.log(params.request.url));
+await Page.navigate({ url: 'https://example.com' });
+```
+
+## 매 결정 기준
+| 상황 | Approach |
+|---|---|
+| Web app dev | DevTools (Elements, Network, Performance) |
+| Perf audit | Lighthouse / Lighthouse CI |
+| E2E test | Playwright (Chrome / Firefox / WebKit) |
+| Scraping / automation | Puppeteer (Chromium native) |
+| Cross-browser test | Playwright + BrowserStack |
+| Privacy-focused user | Brave / Firefox |
+
+**기본값**: Chrome stable + Lighthouse CI + Playwright.
+
+## 🔗 Graph
+- 부모: [[Web Browsers]] · [[Chromium]]
+- 변형: [[Edge]] · [[Brave]] · [[Arc]]
+- 응용: [[DevTools]] · [[Puppeteer]] · [[Lighthouse]]
+- Adjacent: [[V8]] · [[Blink]] · [[CDP]] · [[Web Platform]]
+
+## 🤖 LLM 활용
+**언제**: DevTools workflow, extension scaffolding, headless automation 의 generation.
+**언제 X**: 매 cross-browser compat 매 critical (Firefox / Safari 의 also test).
+
+## ❌ 안티패턴
+- **Chrome-only 가정**: vendor-prefixed `-webkit-` API 의 의존 — 매 standard 의 사용.
+- **Manifest V2**: deprecated — 매 MV3 + service worker.
+- **DevTools throttling 의 무시**: prod 의 slow 3G 시 불상.
+- **`console.log` 의 prod ship**: bundle bloat + privacy — 매 strip plugin.
+
+## 🧪 검증 / 중복
+- Verified (Chrome Developers docs, Chromium source, web.dev).
+- 신뢰도 A.
+
+## 🕓 Changelog
+| 날짜 | 변경 |
+|---|---|
+| 2026-05-08 | Phase 1 |
+| 2026-05-10 | Manual cleanup — Chrome architecture + DevTools + MV3 + 2026 features |