2nd/10_Wiki/Topics/Frontend/WebKit.md

---
id: wiki-2026-0508-webkit
title: WebKit
category: 10_Wiki/Topics
status: verified
canonical_id: self
aliases: [WebKit, JavaScriptCore, Safari Engine]
duplicate_of: none
source_trust_level: A
confidence_score: 0.9
verification_status: applied
tags: [browser, engine, webkit, safari, ios]
raw_sources: []
last_reinforced: 2026-05-10
github_commit: pending
tech_stack:
  language: c++
  framework: webkit
---

# WebKit

## 매 한 줄
> **"매 Apple's open-source browser engine — Safari & iOS WebView 의 foundation"**. 매 KHTML fork (2001) 로 시작, Blink (Chrome) 로 fork (2013), 매 iOS 의 모든 browser (Chrome iOS, Firefox iOS 포함) 가 WebKit 강제 (App Store 정책 — 2025 EU DMA 로 부분 완화). 매 JavaScriptCore (JIT) + WebCore (rendering) + WebKit2 (multi-process) 구조.

## 매 핵심

### 매 architecture
- **JavaScriptCore (JSC)**: 매 JS engine — LLInt → Baseline JIT → DFG JIT → FTL JIT (4-tier).
- **WebCore**: 매 HTML/CSS parsing, layout, rendering.
- **WebKit2**: 매 multi-process — UI process + Web process (per tab) + Networking process. 매 Chrome 의 Blink 보다 먼저 도입 (2011).
- **Safari ≠ WebKit**: 매 Safari 는 WebKit 위 의 shell. 매 WebKit nightly build 는 Safari Technology Preview.

### 매 distinguishing features (vs Blink/Gecko)
- **iOS 독점**: 매 모든 iOS browser 가 WebKit 사용 강제 (UIWebView/WKWebView). 매 EU DMA 로 2024+ 부분 완화 (BrowserEngineKit) 하나 매 실효성 의문.
- **Conservative spec adoption**: 매 Web Push, IndexedDB, ServiceWorker 매 늦게 지원. 매 privacy-first stance (ITP, fingerprinting protection).
- **Memory efficiency**: 매 Chrome 보다 RAM 적게 사용 — Mac 의 battery life 우위.
- **No Manifest V3 ad-blocker drama**: 매 Safari content blocker API 별도.

### 매 응용
1. Safari (macOS, iOS, iPadOS, visionOS).
2. iOS 의 모든 in-app WebView (Twitter/X, Instagram 의 link preview).
3. PlayStation browser, Amazon Kindle browser.
4. Bun runtime — 매 JavaScriptCore 사용 (vs Node 의 V8).
5. GNOME Web (Epiphany), WPE WebKit (embedded).

## 💻 패턴

### Feature detection — Safari quirks
```js
// Safari 의 backdrop-filter
const supportsBackdrop = CSS.supports('backdrop-filter', 'blur(10px)') ||
                        CSS.supports('-webkit-backdrop-filter', 'blur(10px)');

// Safari date input — limited styling
const isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
if (isSafari) {
  // workaround
}

// iOS Safari 100vh bug (toolbar overlap)
:root {
  --vh: 1vh;
}
// JS sets --vh dynamically
```

### iOS WebKit-specific CSS
```css
/* Tap highlight 제거 */
* { -webkit-tap-highlight-color: transparent; }

/* Bounce scroll 제거 */
body { overscroll-behavior-y: none; }

/* iOS safe area (notch) */
.container {
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
}

/* Smooth scrolling on iOS */
.scroll-container {
  -webkit-overflow-scrolling: touch; /* legacy, iOS 13+ unnecessary */
  overflow-y: auto;
}
```

### WKWebView (Swift) — bridging JS ↔ native
```swift
import WebKit

class ViewController: UIViewController, WKScriptMessageHandler {
  var webView: WKWebView!

  override func viewDidLoad() {
    let config = WKWebViewConfiguration()
    config.userContentController.add(self, name: "iosBridge")
    webView = WKWebView(frame: view.bounds, configuration: config)
    view.addSubview(webView)
  }

  func userContentController(_ ucc: WKUserContentController,
                            didReceive message: WKScriptMessage) {
    if message.name == "iosBridge" {
      print("From JS: \(message.body)")
    }
  }
}

// JS side:
// window.webkit.messageHandlers.iosBridge.postMessage({action: 'login'});
```

### Bun — JavaScriptCore runtime
```ts
// Bun 매 JSC 사용 — Node (V8) 보다 startup 빠름
// bun run server.ts
import { serve } from "bun";

serve({
  port: 3000,
  fetch(req) {
    return new Response("Hello from JSC!");
  }
});

// 매 JSC 의 strength: startup time, memory.
// 매 V8 의 strength: peak throughput (FTL 수준), ecosystem.
```

### Detecting WebKit engine
```js
const isWebKit = 'WebkitAppearance' in document.documentElement.style;
const isAppleWebKit = navigator.userAgent.includes('AppleWebKit') &&
                     !navigator.userAgent.includes('Chrome');

// More robust: feature detection over UA sniffing
const hasWebKitDateBug = (() => {
  const input = document.createElement('input');
  input.type = 'date';
  return input.type !== 'date'; // pre-iOS 14
})();
```

### Web Inspector — remote debugging
```bash
# iOS Safari → Mac Safari Web Inspector
# 1. iOS: Settings → Safari → Advanced → Web Inspector ON
# 2. Mac: Safari → Develop menu → [device name]
# 3. Inspect any tab/WKWebView

# Simulator 도 동일.
# Chrome iOS 도 매 WebKit 이라 Mac Safari 로 inspect 가능.
```

## 매 결정 기준
| 상황 | Approach |
|---|---|
| iOS app webview 필요 | WKWebView (UIWebView deprecated). |
| Cross-browser test | Safari Technology Preview + iOS Simulator. |
| Bundle size 매 critical | 매 JSC (Bun) — Node 대비 startup 빠름. |
| Modern API 의존 | 매 Chromium first 개발 후 Safari fallback. |
| Privacy-first browser | Safari (ITP) 또는 Brave. |

**기본값**: WKWebView (iOS), Safari Tech Preview (test), feature detection (production).

## 🔗 Graph
- 부모: [[Web Standards]]
- 변형: [[Blink]]
- 응용: [[Bun]] · [[Tauri]]
- Adjacent: [[JavaScriptCore]] · [[V8]]

## 🤖 LLM 활용
**언제**: iOS 의 webview 통합, Safari-specific bug 디버깅, Bun runtime 결정, cross-browser CSS issue 의.
**언제 X**: Chrome-only Chrome extension, Electron app (Chromium), 매 generic web dev (browser-agnostic 지향 의).

## ❌ 안티패턴
- **UA sniffing**: `navigator.userAgent.includes('Safari')` — Chrome iOS 도 WebKit. Feature detection 사용.
- **iOS 의 100vh 무시**: 매 toolbar 가 viewport 차지 — `dvh` 사용 (iOS 15.4+) 또는 JS 로 `--vh` 계산.
- **Service Worker 의 Safari 무시**: 매 iOS 16.4+ 부터 Web Push 지원, iOS PWA 매 still limited.
- **WebKit prefix 무지**: 매 `-webkit-backdrop-filter` 매 still needed for Safari 17 까지.
- **iOS Chrome 을 진짜 Chrome 로 착각**: 매 모든 iOS browser 가 WebKit 사용. 매 Chrome iOS 매 Blink 아님.

## 🧪 검증 / 중복
- Verified (WebKit official site, WebKit Blog, Apple Developer docs).
- 신뢰도 A.

## 🕓 Changelog
| 날짜 | 변경 |
|---|---|
| 2026-05-08 | Phase 1 |
| 2026-05-10 | Manual cleanup — WebKit engine, iOS quirks, WKWebView bridge, Bun JSC patterns 추가 |