V8과 WebAssembly: 현대 자바스크립트 엔진의 구조와 성능 최적화(상하편)

// V8 내부 객체 구조 (단순화)
class HeapObject {
  Map* map_;           // Hidden Class 포인터 (4/8 bytes)
  Properties* props_;  // 동적 속성 저장소
  Elements* elements_; // 배열 요소 저장소
  // ... 인라인 속성들
};

V8 Heap (총 크기: nn MB ~ n GB)
├── Young Generation (1-32MB)
│   ├── Nursery (Semi-space 1)
│   ├── Intermediate (Semi-space 2)  
│   └── Survivor Space
├── Old Generation
│   ├── Old Object Space
│   ├── Code Space (실행 가능 코드)
│   ├── Map Space (Hidden Classes)
│   └── Large Object Space (>256KB 객체)
└── Non-movable Spaces
    ├── Read-only Space
    └── Shared Space (cross-isolate)

// Pretenuring 예시 - V8이 패턴을 학습
function createLargeObject() {
  return new Array(1000000); // 여러 번 호출 시 Old Space 직접 할당
}

// Write Barrier (단순화)
if (is_old_object(obj) && is_young_object(value)) {
  remembered_set.insert(obj_address);
}

// React Fiber 노드 구조 (simplified)
class FiberNode {
  constructor(element) {
    this.type = element.type;
    this.key = element.key;
    this.props = element.props;
    
    // 이 참조들이 문제의 핵심
    this.child = null;      // 자식 Fiber
    this.sibling = null;    // 형제 Fiber
    this.return = null;     // 부모 Fiber
    this.alternate = null;  // 이전 렌더링의 Fiber (더블 버퍼링)
    
    // 오래 살아남는 참조들
    this.memoizedState = null;     // Hooks 상태
    this.memoizedProps = null;     // 이전 props
    this.updateQueue = null;        // 업데이트 큐
  }
}

// 실제 React 앱에서의 Fiber 트리
const fiberRoot = {
  current: rootFiber,        // 현재 트리 (Old Generation으로 승격)
  workInProgress: null,      // 작업 중인 트리 (Young Generation)
  pendingTime: 0,
  finishedWork: null
};

// 흔한 메모리 누수 패턴
function ExpensiveComponent() {
  const [data, setData] = useState([]);
  
  useEffect(() => {
    // 이 클로저가 전체 컴포넌트 스코프를 캡처
    const timer = setInterval(() => {
      setData(prev => [...prev, generateLargeObject()]);
    }, 1000);
    
    // cleanup 함수를 잊으면 메모리 누수
    return () => clearInterval(timer);
  }, []); // deps가 비어있어도 클로저는 생성됨
  
  // 각 렌더링마다 새로운 함수 생성 (Young Generation 압박)
  const handleClick = useCallback(() => {
    // 이 함수는 data 전체를 클로저로 캡처
    console.log(data.length);
  }, [data]);
}

// V8이 최적화하기 어려운 Hook 패턴
function useComplexState() {
  const [state, setState] = useState(() => {
    // 이 초기화 함수는 한 번만 실행되지만
    // V8은 이를 예측하기 어려워함
    return createExpensiveInitialState();
  });
  
  // Hook의 linked list 구조가 GC에 부담
  const hook = {
    memoizedState: state,
    queue: updateQueue,
    next: nextHook  // 다음 Hook 참조
  };
}

// Virtual DOM 객체 생성 패턴
function createElement(type, props, ...children) {
  return {
    $$typeof: REACT_ELEMENT_TYPE,
    type,
    key: props?.key || null,
    ref: props?.ref || null,
    props: { ...props, children },
    _owner: currentOwner  // Fiber 참조
  };
}

// 매 렌더링마다 생성되는 임시 객체들
function render() {
  // 이 모든 객체가 Young Generation에 생성
  return (
    <div className="container">
      {items.map(item => (
        <Item 
          key={item.id}
          data={item}
          onClick={() => handleClick(item.id)}
        />
      ))}
    </div>
  );
  // Reconciliation 후 대부분 즉시 버려짐
}

// Reconciliation 중 생성되는 작업 객체들
const updatePayload = {
  type: 'UPDATE',
  fiber: currentFiber,
  partialState: newState,
  callback: commitCallback,
  next: null  // Update queue의 linked list
};

// React DevTools가 추가하는 메모리 오버헤드
if (__DEV__) {
  // 각 Fiber에 디버깅 정보 추가
  fiber._debugSource = element._source;
  fiber._debugOwner = element._owner;
  fiber._debugHookTypes = hookTypes;
  
  // 프로파일링을 위한 타이밍 정보
  fiber.actualDuration = 0;
  fiber.actualStartTime = 0;
  fiber.selfBaseDuration = 0;
  fiber.treeBaseDuration = 0;
}

// 메모리 프로파일링 최적화 전략
class MemoryOptimizedComponent extends React.Component {
  shouldComponentUpdate(nextProps) {
    // 불필요한 렌더링 방지로 Virtual DOM 생성 감소
    return !shallowEqual(this.props, nextProps);
  }
  
  componentDidMount() {
    // WeakMap 사용으로 GC 친화적 캐싱
    this.cache = new WeakMap();
  }
  
  componentWillUnmount() {
    // 명시적 정리로 메모리 누수 방지
    this.cache = null;
    this.subscription?.unsubscribe();
  }
}

// React 18의 Automatic Batching
function handleMultipleUpdates() {
  // 이전: 각 setState가 별도 렌더링 트리거
  // 현재: 자동으로 배치 처리되어 GC 부하 감소
  setCount(c => c + 1);
  setFlag(f => !f);
  setItems(i => [...i, newItem]);
}

// Suspense와 메모리 관리
const LazyComponent = React.lazy(() => {
  // 동적 import로 초기 메모리 사용량 감소
  return import('./HeavyComponent');
});

// useDeferredValue로 우선순위 기반 렌더링
function SearchResults({ query }) {
  const deferredQuery = useDeferredValue(query);
  
  // 긴급하지 않은 업데이트는 지연 처리
  // Young Generation 부하 분산
  return <ExpensiveList query={deferredQuery} />;
}

// Facebook에서 사용하는 메모리 최적화 패턴
const RecyclerListView = {
  // 객체 풀링으로 GC 부하 감소
  viewPool: [],
  
  getView() {
    return this.viewPool.pop() || this.createView();
  },
  
  releaseView(view) {
    view.reset();
    this.viewPool.push(view);
  }
};

// Relay의 GC 친화적 캐시 전략
class RelayCache {
  constructor() {
    // WeakMap으로 자동 메모리 관리
    this.records = new WeakMap();
    
    // TTL 기반 만료로 Old Generation 증가 방지
    this.ttl = 5 * 60 * 1000; // 5분
  }
  
  gc() {
    // 주기적으로 오래된 레코드 정리
    const now = Date.now();
    for (const [key, record] of this.records) {
      if (now - record.fetchTime > this.ttl) {
        this.records.delete(key);
      }
    }
  }
}

// Cheney Algorithm 의 Pseudocode
void scavenge() {
  scan = next = to_space.bottom;
  // 1. 루트 스캐닝
  for (root in roots) {
    *root = copy(*root);
  }
  // 2. 너비 우선 탐색
  while (scan < next) {
    for (slot in slots_in(scan)) {
      *slot = copy(*slot);
    }
    scan += object_size(scan);
  }
}

// Tri-color invariant
enum MarkColor {
  WHITE = 0,  // 미방문, 회수 대상
  GREY = 1,   // 방문했으나 자식 미처리
  BLACK = 2   // 방문 완료, 살아있음
};

// 증분 마킹을 위한 Barrier 
void WriteBarrier(HeapObject* obj, Object** slot, Object* value) {
  if (marking_state == INCREMENTAL &&
      IsBlack(obj) && IsWhite(value)) {
    // tri-color 위반
    MarkGrey(value);  // 불변성 유지
    marking_worklist.Push(value);
  }
}

class ParallelMarker {
  std::atomic<Object*> marking_worklist;
  std::atomic<size_t> bytes_marked;
  
  void MarkInParallel() {
    while (Object* obj = marking_worklist.pop()) {
      MarkObject(obj);
      // 로컬 작업 큐가 비어있을 때
      if (local_worklist.empty()) {
        StealFromOtherThread();
      }
    }
  }
};

// 증분 단계 트리거링
function shouldTriggerIncrementalStep() {
  const allocated = bytesAllocatedSinceLastStep();
  const threshold = heap.size() * 0.01; // 1% of heap
  return allocated > threshold;
}

// 증분 단계마다 ~1MB를 처리
function incrementalMarkingStep() {
  const deadline = performance.now() + 5; // 5ms budget
  while (performance.now() < deadline && !marking_worklist.empty()) {
    markNextObject();
  }
}

class ConcurrentMarker {
  void WriteBarrierSATB(HeapObject* obj, Object** slot, Object* new_value) {
    Object* old_value = *slot;
    if (concurrent_marking_active && 
        IsWhite(old_value) && !IsWhite(new_value)) {
      // SATB를 위해 이전 참조 보존
      satb_buffer.push(old_value);
    }
    *slot = new_value;
  }
  
  void ConcurrentMarkingTask() {
    // 헬퍼 스레드에서 실행
    while (!marking_worklist.empty()) {
      Object* obj = marking_worklist.pop();
      // CAS를 사용한 lock-free 마킹
      if (TryMarkBlack(obj)) {
        VisitPointers(obj);
      }
    }
  }
};

class ParallelScavenger {
  void Scavenge() {
    // 1. 루트 스캔을 병렬로 수행
    parallel_for(roots, [](Root* root) {
      EvacuateObject(root->object);
    });
    
    // 2. Work stealing으로 부하 균형
    while (has_work() || can_steal_work()) {
      Object* obj = get_next_object();
      CopyToSurvivor(obj);
    }
    
    // 3. 포인터 업데이트도 병렬로
    parallel_update_pointers();
  }
};

// 타임라인 예시
[JS 실행]-->[동시 마킹 시작]-->[JS 계속]-->[증분 5ms]-->[JS 계속]-->[최종 2ms]-->[JS 재개]
    ↑            ↑             ↑           ↑
할당 임계값 도달   백그라운드 작업   협력적 처리   최소 중단

// Chrome의 requestIdleCallback과 연동
requestIdleCallback((deadline) => {
  // 남은 시간 확인
  const timeRemaining = deadline.timeRemaining();
  
  if (timeRemaining > 10) {
    // 충분한 시간이 있으면 Major GC
    triggerMajorGC();
  } else if (timeRemaining > 2) {
    // 짧은 시간이면 Minor GC
    triggerMinorGC();
  }
});

class ConcurrentMarkingVisitor {
  void VisitPointers(HeapObject* host, ObjectSlot start, ObjectSlot end) {
    for (ObjectSlot slot = start; slot < end; ++slot) {
      Object* target = *slot;
      
      // 1. 이미 방문한 객체는 건너뜀
      if (IsBlackOrGrey(target)) continue;
      
      // 2. 동시성 안전을 위한 CAS 연산
      if (CompareAndSwapColor(target, WHITE, GREY)) {
        // 3. 작업 큐에 추가 (lock-free queue)
        marking_worklist_.Push(target);
        
        // 4. Write barrier 활성화
        if (host->IsInOldSpace()) {
          remembered_set_.Insert(slot);
        }
      }
    }
  }
};

class WorkStealingQueue {
  bool TrySteal(Object** obj) {
    // 1. 먼저 로컬 큐 확인
    if (local_queue_.Pop(obj)) return true;
    
    // 2. 로컬이 비어있으면 다른 스레드에서 Steal
    for (int i = 0; i < num_threads; i++) {
      if (global_queues_[i].TryStealHalf(&local_queue_)) {
        return local_queue_.Pop(obj);
      }
    }
    
    // 3. 모든 큐가 비어있으면 종료
    return false;
  }
};

// 예시: 최적화 대상 함수
function calculateSum(arr) {
  let sum = 0;
  for (let i = 0; i < arr.length; i++) {
    sum += arr[i];  // Hot Loop - Crankshaft가 최적화
  }
  return sum;
}

// Full-codegen: 빠른 컴파일, 느린 실행
// -> 모든 코드를 즉시 네이티브 코드로 변환

// Crankshaft: 느린 컴파일, 빠른 실행  
// -> Hot 함수만 선택적으로 최적화

// Ignition 바이트코드 인터프리터 작동 방식
function Component({ data }) {
  // 1. 파싱 -> AST 생성
  // 2. Ignition이 바이트코드로 변환
  const result = data.map(item => item * 2);
  
  // 3. 실행 횟수 추적 (Feedback Vector)
  // 4. Hot 함수는 TurboFan으로 전달
  return result;
}

// 실제 바이트코드 예시 (단순화)
/*
  LdaNamedProperty a0, [0]    // data 로드
  CallProperty1 [1], a0, a1   // map 호출
  Return                      // 결과 반환
*/

// Hidden Class 전환 예시
class Point {
  constructor(x, y) {
    this.x = x;  // Hidden Class C0 -> C1
    this.y = y;  // Hidden Class C1 -> C2
  }
}

// Monomorphic (단일형): 최적화 가능
function getX(point) {
  return point.x;  // 항상 같은 Hidden Class
}

// Polymorphic (다형): 최적화 어려움
function getValue(obj) {
  return obj.value;  // 다양한 Hidden Class 가능
}

// React 컴포넌트에서의 예시
function UserProfile({ user }) {
  // props 구조가 일정하면 IC 효과적
  return <div>{user.name}</div>;
}

// Anti-pattern: 동적 속성 추가
function BadComponent({ data }) {
  if (someCondition) {
    data.extraField = 'value';  // Hidden Class 변경!
  }
  return <div>{data.value}</div>;
}

// V8의 최적화 결정 과정
class OptimizationExample {
  // Cold 함수: Ignition에서만 실행
  rarely_called() {
    return Math.random();
  }
  
  // Warm 함수: 타입 피드백 수집
  sometimes_called(x, y) {
    return x + y;  // 타입 정보 기록
  }
  
  // Hot 함수: TurboFan으로 최적화
  frequently_called(arr) {
    // 실행 횟수 > 임계값 => 최적화 트리거
    let sum = 0;
    for (let i = 0; i < arr.length; i++) {
      sum += arr[i];
    }
    return sum;
  }
}

// 타입 피드백 수집 예시
let feedback = {
  callCount: 0,
  parameterTypes: [],
  returnTypes: []
};

// React의 경우: 렌더링 함수는 자주 호출되어 최적화 대상
function FrequentlyRendered({ items }) {
  // TurboFan이 최적화할 가능성 높음
  return items.map((item, i) => (
    <Item key={i} data={item} />
  ));
}

// 1. 인라인화 (Inlining)
// 작은 함수의 호출 오버헤드를 제거하여 10-30% 성능 향상
function add(a, b) { return a + b; }
function calculate(x, y) {
  return add(x, y) * 2;  
  // 최적화 후: return (x + y) * 2;
  // 함수 호출 비용 제거 + 추가 최적화 기회 창출
}

// 2. 이스케이프 분석 (Escape Analysis)
// 임시 객체의 힙 할당을 회피하여 GC 부담 감소
function createPoint() {
  const point = { x: 10, y: 20 };  // 원래는 힙에 할당
  return point.x + point.y;  // 객체가 함수를 벗어나지 않음
  // 최적화 후: return 30;  // 컴파일 시점에 계산
  // 결과: 객체 생성 비용 0, GC 대상 제외
}

// 3. 루프 최적화
function processArray(arr) {
  // Loop unrolling: 반복 횟수를 줄여 분기 예측 실패 감소
  for (let i = 0; i < arr.length; i += 4) {
    // 원래는 매 반복마다 조건 체크
    // 최적화 후: 4개씩 한번에 처리
    arr[i] = arr[i] * 2;
    arr[i+1] = arr[i+1] * 2;
    arr[i+2] = arr[i+2] * 2;
    arr[i+3] = arr[i+3] * 2;
  }
  // 성능: 최대 4배 향상 (CPU 파이프라인 효율)
}

// 4. React에서 활용되는 최적화
const MemoizedComponent = React.memo(({ data }) => {
  // TurboFan이 props 비교 로직 최적화
  return <ExpensiveRender data={data} />;
});

// Chrome DevTools에서 컴파일러 동작 확인
function profileFunction() {
  // 1. 초기 실행: Ignition 인터프리터
  console.time('cold');
  calculateSum([1,2,3,4,5]);
  console.timeEnd('cold');
  
  // 2. 반복 실행: 타입 피드백 수집
  for (let i = 0; i < 1000; i++) {
    calculateSum([1,2,3,4,5]);
  }
  
  // 3. Hot 실행: TurboFan 최적화 코드
  console.time('hot');
  calculateSum([1,2,3,4,5]);
  console.timeEnd('hot');  // 훨씬 빠름
}

// V8 플래그로 최적화 상태 확인
// node --trace-opt --trace-deopt script.js

// React 18의 컴파일러 친화적 패턴
function OptimizedComponent() {
  // 1. 일관된 타입 사용
  const [count, setCount] = useState(0);  // 항상 number
  
  // 2. 조건부 렌더링 최적화
  const content = useMemo(() => {
    // TurboFan이 최적화하기 쉬운 구조
    return count > 10 ? <Heavy /> : <Light />;
  }, [count]);
  
  // 3. 이벤트 핸들러 최적화
  const handleClick = useCallback((e) => {
    // 같은 함수 참조 유지 => IC 효과적
    setCount(c => c + 1);
  }, []);
  
  return <div onClick={handleClick}>{content}</div>;
}

// React Compiler (실험적)와 V8의 협업
// React Compiler는 컴파일 타임에 최적화를 수행하여
// V8이 런타임에 더 효율적으로 실행할 수 있는 코드 생성

// 안티패턴 1: Hidden Class 오염
function bad() {
  const obj = {};
  obj.a = 1;      // HC1
  obj.b = 2;      // HC2
  delete obj.a;   // HC3 - 최적화 해제
}

// 해결책: 구조 고정
function good() {
  const obj = { a: 1, b: 2 };  // 한 번에 생성
  if (needToRemove) {
    obj.a = undefined;  // delete 대신 undefined
  }
}

// 안티패턴 2: 다형성 과다
function processItems(items) {
  items.forEach(item => {
    // item이 다양한 타입 => 최적화 어려움
    console.log(item.value);
  });
}

// 해결책: 타입 통일
interface Item {
  value: number;
  type: string;
}
function processTypedItems(items: Item[]) {
  // 일관된 타입 => IC 효과적
  items.forEach(item => console.log(item.value));
}

// 객체 풀 구현 (simplified)
class ObjectPool {
  constructor(createFn, maxSize = 100) {
    this.createFn = createFn;
    this.pool = Array(maxSize).fill(null).map(createFn);
  }
  
  acquire() {
    return this.pool.pop() || this.createFn();
  }
  
  release(obj) {
    this.pool.push(obj);
  }
}

// React에서 활용 예시
const bulletPool = new ObjectPool(
  () => ({ x: 0, y: 0, active: false }), 
  1000  // 총알 1000개 풀링
);

// 성능 비교
const particles = [];
for (let i = 0; i < 10000; i++) {
  // Without pooling: 매번 새 객체 생성
  particles.push({ x: Math.random() * 800, y: 600 });
  
  // With pooling: 객체 재사용
  // const p = pool.acquire();
  // p.x = Math.random() * 800;
}
// 결과: GC pause 70% 감소, 프레임 드롭 해결

// 메모리 단편화 예시
class FragmentationExample {
  constructor() {
    // 단편화를 일으키는 패턴
    this.data = [];
    
    // 단편화 예시: 크고 작은 객체 혼재 후 선택적 제거
    // 결과: 메모리에 빈 공간 불규칙 분포
  }
}

// 개발자 최적화 전략
const optimized = {
  smallObjects: [],     // 크기별 그룹화
  largeObjects: [],     // 단편화 방지
  buffer: new ArrayBuffer(1024 * 1024), // 연속 메모리
};

// 포인터 압축 효과 (Chrome 80+)
// Before: 각 참조 8 bytes (64-bit)
// After:  각 참조 4 bytes (32-bit offset)
// 결과: V8 힙 43% 감소

const obj = {
  ref1: {},  // 8 bytes -> 4 bytes
  ref2: {},  // 50% 메모리 절약
  ref3: {}
};

// 문자열 인터닝 최적화
const EVENT_TYPES = {
  CLICK: 'click',
  HOVER: 'hover'
};

// V8 자동 인터닝: 동일 문자열 한 번만 저장
// 10,000번 사용해도 메모리에 1개 인스턴스
events.push({ type: EVENT_TYPES.CLICK });

// WeakMap: 자동 메모리 해제
const cache = new WeakMap();

// DOM 노드 메타데이터 (자동 정리)
elements.forEach(el => {
  cache.set(el, { data: 'metadata' });
  // el 제거 시 캐시도 자동 정리
});

// Map: 명시적 삭제 필요 (메모리 누수 위험)
const map = new Map();  // 강한 참조 유지

// WebAssembly 다계층 컴파일
async function loadWasm() {
  const response = await fetch('module.wasm');
  // Streaming: 다운로드와 동시 컴파일
  const module = await WebAssembly.compileStreaming(response);
  
  // Liftoff: ~10ms/MB (빠른 baseline)
  // TurboFan: ~100ms/function (백그라운드 최적화)
  
  return WebAssembly.instantiate(module, imports);
}

// Dynamic Tiering: 핫함수 자동 감지
const funcStats = {
  add: { calls: 0, optimized: false },
  matrixMultiply: { calls: 0, optimized: false }
};

// 임계값(1000회) 초과 시 TurboFan 최적화
if (funcStats.matrixMultiply.calls++ > 1000) {
  // Liftoff -> TurboFan 재컴파일
}

// React에서 WASM 활용
const wasm = await WebAssembly.instantiateStreaming(
  fetch('module.wasm')
);
wasm.instance.exports.processImage(data);

// 메모리 공유: Linear Memory
const memory = new WebAssembly.Memory({
  initial: 256,   // 16MB
  maximum: 32768  // 2GB
});

// JS <-> WASM 데이터 전송
const view = new Uint8Array(memory.buffer, ptr, size);
view.set(data);  // JS -> WASM

// WasmGC (Chrome 119+): 자동 GC
// (type $point (struct (field $x f64) (field $y f64)))
// JS와 WASM이 동일 GC 공유

// SIMD: 4개 데이터 동시 처리
// JavaScript: 루프로 1개씩 처리
for (let i = 0; i < arr.length; i++) {
  result[i] = a[i] + b[i];  // 느림
}

// WASM SIMD: 4개씩 병렬 처리
// (f32x4.add (v128.load a) (v128.load b))
// 4배 빠른 벡터 연산

// 성능: JS ~450ms -> WASM ~50ms -> SIMD ~15ms

// WASM 코드 캐싱 (IndexedDB)
async function loadWithCache(url) {
  // 1. 캐시 확인
  let module = await cache.get(url);
  
  if (!module) {
    // 2. 컴파일 & 저장
    module = await WebAssembly.compileStreaming(
      fetch(url)
    );
    await cache.store(url, module);
  }
  
  return module;  // 재컴파일 없이 재사용
}

// 성능 벤치마크 (행렬 곱셈 512x512)
// JavaScript:     ~450ms
// WebAssembly:    ~50ms  (9x faster)
// WASM + SIMD:    ~15ms  (30x faster)

// React 이미지 필터 예시
const applyFilter = async (imageData) => {
  // JS 필터:   ~50ms
  // WASM 필터: ~5ms (10x faster)
  return wasmFilters[filterType](imageData);
};

// Gmail의 점진적 DOM 업데이트 전략
class IncrementalRenderer {
  constructor() {
    this.pendingUpdates = new WeakMap();
    this.updateQueue = [];
  }
  
  scheduleUpdate(element, patch) {
    // WeakMap으로 GC 친화적 참조
    this.pendingUpdates.set(element, patch);
    
    // requestIdleCallback으로 유휴 시간 활용
    requestIdleCallback(() => {
      this.processBatch();
    }, { timeout: 16 }); // 1 frame budget
  }
  
  processBatch() {
    const batchSize = 100;
    for (let i = 0; i < batchSize && this.updateQueue.length; i++) {
      const update = this.updateQueue.shift();
      update.apply();
    }
  }
}

// 메시지 객체 풀링
class MessagePool {
  constructor(size = 1000) {
    this.pool = [];
    this.activeMessages = new Set();
    
    // 미리 할당
    for (let i = 0; i < size; i++) {
      this.pool.push(new Message());
    }
  }
  
  acquire() {
    let msg = this.pool.pop();
    if (!msg) {
      // 풀이 소진되어 동적으로 확장
      console.warn('Pool expansion triggered');
      msg = new Message();
    }
    this.activeMessages.add(msg);
    return msg.reset();
  }
  
  release(msg) {
    if (this.activeMessages.delete(msg)) {
      this.pool.push(msg);
    }
  }
}

// Chrome DevTools Performance API 활용
class V8Profiler {
  static measureGC() {
    const obs = new PerformanceObserver((list) => {
      for (const entry of list.getEntries()) {
        if (entry.entryType === 'measure' && 
            entry.detail?.kind === 'gc') {
          console.log(`GC Type: ${entry.detail.type}`);
          console.log(`Duration: ${entry.duration}ms`);
          console.log(`Heap Before: ${entry.detail.usedHeapSizeBefore}`);
          console.log(`Heap After: ${entry.detail.usedHeapSizeAfter}`);
        }
      }
    });
    
    obs.observe({ entryTypes: ['measure'] });
  }
  
  static getHeapSnapshot() {
    if (typeof gc !== 'undefined') {
      gc(); // Force GC
    }
    
    return performance.measureUserAgentSpecificMemory();
  }
}

테스트 환경: 8GB RAM, 4-core CPU
측정 앱: Gmail, Google Docs, YouTube

결과:
- V8 Heap: 1.2GB -> 684MB (43% 감소)
- Renderer Memory: 2.1GB -> 1.68GB (20% 감소)
- Major GC Time: 45ms -> 38.7ms (14% 감소)
- FID p95: 24ms -> 19ms

Benchmark: Speedometer 2.0

Legacy (2015):
- Score: 45 ± 3
- GC Pause p50: 23ms
- GC Pause p99: 112ms
- Total GC Time: 3.2s

Orinoco (2019):
- Score: 78 ± 2 (73% 향상)
- GC Pause p50: 2.1ms (91% 감소)
- GC Pause p99: 14ms (87% 감소)  
- Total GC Time: 0.9s (72% 감소)

// V8 최적화 체크리스트
const optimizationChecklist = {
  // 1. Hidden Class 최적화
  avoidDynamicProperties: true,
  useConstructorsConsistently: true,
  
  // 2. 인라인 캐싱
  avoidPolymorphicCalls: true,
  limitFunctionTypes: 4,
  
  // 3. 메모리 관리
  useObjectPools: true,
  limitClosureScopes: true,
  preferTypedArrays: true,
  
  // 4. GC 트리거 최소화
  batchDOMUpdates: true,
  useWeakReferences: true,
  clearLargeObjects: true
};