Antigravity Agent
f8b21af4be
10_Wiki/Topics 대규모 정리: - 오류 캡처/미완성 stub 문서 227개 제거 - 교차폴더 중복 43클러스터 병합 (63파일 → redirect) - 링크명 정규화: 깨진 링크 수정·redirect 직결·개념 매핑 ~2,400건 - 카테고리 MOC 6개 신규 생성 - Graph 섹션 미해결 related-keyword 링크 10,058건 제거 Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
149 lines
4.4 KiB
Markdown
149 lines
4.4 KiB
Markdown
---
|
|
id: wiki-2026-0508-blink
|
|
title: Blink
|
|
category: 10_Wiki/Topics
|
|
status: verified
|
|
canonical_id: self
|
|
aliases: [P-Reinforce-AUTO-7F733B, Chromium Blink, Blink Renderer]
|
|
duplicate_of: none
|
|
source_trust_level: A
|
|
confidence_score: 0.9
|
|
verification_status: applied
|
|
tags: [browser, web, rendering, chromium]
|
|
raw_sources: []
|
|
last_reinforced: 2026-05-10
|
|
github_commit: pending
|
|
tech_stack:
|
|
language: cpp
|
|
framework: chromium
|
|
---
|
|
|
|
# Blink
|
|
|
|
## 매 한 줄
|
|
> **"매 Chromium 의 rendering engine — 매 Web 의 de facto standard."**. Blink 는 Google 이 2013 년 WebKit 에서 fork 한 layout/rendering engine 으로, Chrome/Edge/Brave/Opera 등 Chromium-based browser 의 90%+ market share 를 통해 매 modern web platform (CSS Grid, Houdini, View Transitions) 을 정의한다.
|
|
|
|
## 매 핵심
|
|
|
|
### 매 Pipeline
|
|
1. **Parse** — HTML/CSS → DOM/CSSOM.
|
|
2. **Style** — selector matching, computed style.
|
|
3. **Layout (LayoutNG)** — box tree, fragment tree.
|
|
4. **Paint** — display item list.
|
|
5. **Composite (CC)** — layer tree → GPU draw quads.
|
|
6. **Raster + Display** — Skia/SkiaGanesh → Viz → Display compositor.
|
|
|
|
### 매 vs WebKit / Gecko
|
|
- **Blink (Chromium)**: V8, Skia, multi-process.
|
|
- **WebKit (Safari)**: JavaScriptCore, CoreGraphics/Metal.
|
|
- **Gecko (Firefox)**: SpiderMonkey, WebRender (Rust).
|
|
|
|
### 매 응용
|
|
1. Chrome/Edge browsers.
|
|
2. Electron/Tauri (Tauri uses platform webview).
|
|
3. CEF (Chromium Embedded Framework).
|
|
4. Headless Chrome / Puppeteer / Playwright.
|
|
|
|
## 💻 패턴
|
|
|
|
### Custom Element via Web Components
|
|
```javascript
|
|
class MyButton extends HTMLElement {
|
|
connectedCallback() {
|
|
this.attachShadow({ mode: "open" }).innerHTML = `
|
|
<button><slot></slot></button>
|
|
<style>button { padding: 8px 16px; }</style>`;
|
|
}
|
|
}
|
|
customElements.define("my-button", MyButton);
|
|
```
|
|
|
|
### CSS Houdini Paint Worklet
|
|
```javascript
|
|
// checkerboard.js
|
|
class Checkerboard {
|
|
paint(ctx, geom, props) {
|
|
const size = props.get("--check-size").value;
|
|
for (let y = 0; y < geom.height; y += size)
|
|
for (let x = 0; x < geom.width; x += size)
|
|
if (((x/size) + (y/size)) % 2) ctx.fillRect(x, y, size, size);
|
|
}
|
|
}
|
|
registerPaint("checkerboard", Checkerboard);
|
|
```
|
|
```css
|
|
div { background: paint(checkerboard); --check-size: 20; }
|
|
```
|
|
|
|
### View Transitions (Blink 111+)
|
|
```javascript
|
|
async function navigate(url) {
|
|
if (!document.startViewTransition) return location.assign(url);
|
|
const t = document.startViewTransition(() => loadInto(url));
|
|
await t.finished;
|
|
}
|
|
```
|
|
|
|
### Performance: Containment
|
|
```css
|
|
.card {
|
|
contain: layout paint style; /* isolate subtree work */
|
|
content-visibility: auto; /* skip offscreen rendering */
|
|
}
|
|
```
|
|
|
|
### DevTools Trace (Programmatic)
|
|
```javascript
|
|
// puppeteer
|
|
const browser = await puppeteer.launch();
|
|
const page = await browser.newPage();
|
|
await page.tracing.start({ path: "trace.json", categories: ["devtools.timeline"] });
|
|
await page.goto("https://example.com");
|
|
await page.tracing.stop();
|
|
```
|
|
|
|
### CDP (Chrome DevTools Protocol)
|
|
```javascript
|
|
const client = await page.target().createCDPSession();
|
|
await client.send("Performance.enable");
|
|
const { metrics } = await client.send("Performance.getMetrics");
|
|
console.log(metrics.find(m => m.name === "LayoutCount"));
|
|
```
|
|
|
|
## 매 결정 기준
|
|
| 상황 | 권장 |
|
|
|---|---|
|
|
| Cross-browser web app | Standards-only, test 3 engines |
|
|
| Desktop app (full Chromium) | Electron/CEF |
|
|
| Lightweight desktop | Tauri (system webview) |
|
|
| Automation/scrape | Playwright (multi-engine) |
|
|
| Mobile WebView | System WebView (avoid bundling) |
|
|
|
|
**기본값**: standards + feature detection; Blink-specific API only with fallbacks.
|
|
|
|
## 🔗 Graph
|
|
- 부모: [[Chromium]]
|
|
- 변형: [[WebKit]]
|
|
- 응용: [[Electron]] · [[Playwright]]
|
|
- Adjacent: [[V8]] · [[Skia]]
|
|
|
|
## 🤖 LLM 활용
|
|
**언제**: explain pipeline stage, generate web platform boilerplate.
|
|
**언제 X**: Blink internals C++ patches — need source + CL review.
|
|
|
|
## ❌ 안티패턴
|
|
- **Vendor-prefixed only**: `-webkit-` without standard fallback.
|
|
- **Layout thrashing**: read-write-read forced sync layouts.
|
|
- **Heavy main thread**: blocks composite — use Workers + OffscreenCanvas.
|
|
- **Assuming Chromium-only**: breaks Safari/Firefox parity.
|
|
|
|
## 🧪 검증 / 중복
|
|
- Verified (chromium.org docs, web.dev, Blink design docs).
|
|
- 신뢰도 A.
|
|
|
|
## 🕓 Changelog
|
|
| 날짜 | 변경 |
|
|
|---|---|
|
|
| 2026-05-08 | Phase 1 |
|
|
| 2026-05-10 | Manual cleanup — pipeline, Houdini, View Transitions |
|