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