docs(10_Wiki): Topic_Business/General/Graphic/Programming을 Topics/ 하위로 이동
최상위 10_Wiki/Topic_*였던 4개 카테고리 폴더를 10_Wiki/Topics/Topic_* 로 재배치. 콘텐츠 변경 없음(순수 폴더 이동) — Topics/ 하위 나머지 폴더는 이미 지난 커밋에서 전부 정리된 상태(잔존 항목은 에이전트 운영 상태 및 사용자가 보존을 요청한 업데이트0615/무제 3.canvas 뿐).
This commit is contained in:
Antigravity Agent
@@ -0,0 +1,191 @@
|
||||
---
|
||||
id: wiki-2026-0508-chrome
|
||||
title: Chrome
|
||||
category: 10_Wiki/Topics
|
||||
status: verified
|
||||
canonical_id: self
|
||||
aliases: [Google Chrome, Chromium]
|
||||
duplicate_of: none
|
||||
source_trust_level: A
|
||||
confidence_score: 0.9
|
||||
verification_status: applied
|
||||
tags: [browser, chromium, devtools, frontend, web-platform]
|
||||
raw_sources: []
|
||||
last_reinforced: 2026-05-10
|
||||
github_commit: pending
|
||||
tech_stack:
|
||||
language: JavaScript
|
||||
framework: V8 / Blink
|
||||
---
|
||||
|
||||
# Chrome
|
||||
|
||||
## 매 한 줄
|
||||
> **"매 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 의 기반.
|
||||
|
||||
## 매 핵심
|
||||
|
||||
### 매 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
|
||||
|
||||
### 매 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
|
||||
|
||||
### 매 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.
|
||||
|
||||
## 💻 패턴
|
||||
|
||||
### DevTools console snippet
|
||||
```js
|
||||
// 모든 image lazy 의 강제
|
||||
$$('img').forEach(img => img.loading = 'lazy');
|
||||
|
||||
// Performance mark
|
||||
performance.mark('start');
|
||||
// ... work
|
||||
performance.mark('end');
|
||||
performance.measure('work', 'start', 'end');
|
||||
console.table(performance.getEntriesByName('work'));
|
||||
```
|
||||
|
||||
### 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
|
||||
```
|
||||
|
||||
### Puppeteer (headless)
|
||||
```ts
|
||||
import puppeteer from 'puppeteer';
|
||||
|
||||
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();
|
||||
```
|
||||
|
||||
### 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" }
|
||||
}
|
||||
```
|
||||
|
||||
```js
|
||||
// sw.js
|
||||
chrome.tabs.onCreated.addListener(async () => {
|
||||
const tabs = await chrome.tabs.query({});
|
||||
await chrome.action.setBadgeText({ text: String(tabs.length) });
|
||||
});
|
||||
```
|
||||
|
||||
### 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
|
||||
- 부모: [[Chromium]]
|
||||
- 변형: [[Arc]]
|
||||
- 응용: [[Lighthouse]]
|
||||
- Adjacent: [[V8]] · [[Blink]]
|
||||
|
||||
## 🤖 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 |
|
||||
Reference in New Issue
Block a user