Delayed Message Timing API 알아보기

Delayed Message Timing API는 2025년 말부터 웹 성능 최적화 분야에서 뜨겁게 부상하고 있는 최신 브라우저 API입니다.

기존에는 postMessage를 통해 창(Window), 아이프레임(iframe), 웹 워커(Web Worker) 간에 메시지를 주고받을 때 왜 메시지 처리가 늦어지는지를 정확히 알 방법이 없었습니다. 이 API는 바로 그 병목 현상을 진단하기 위해 탄생했습니다.

🧐 왜 필요한가요?

복잡한 웹 서비스는 메인 스레드의 부담을 줄이기 위해 web worker를 쓰거나 여러 iframe을 활용합니다. 하지만 postMessage는 비동기로 작동하며 브라우저의 작업 큐(Task Queue)에 쌓입니다.

• 문제: 메인 스레드가 무거운 자바스크립트를 실행 중이면 메시지 처리가 뒤로 밀립니다.
• 기존의 한계: 메시지가 늦게 도착했다는 건 알 수 있지만, 이게 직렬화 때문인지, 다른 작업이 스레드를 점유해서인지는 추측만 가능했습니다.

주요 측정 항목

이 API는 PerformanceObserver를 통해 다음과 같은 상세 데이터를 제공합니다.

속성명	설명
blockedDuration	메시지가 큐에서 대기하며 처리가 차단된 총 시간
serialization	데이터를 보내기 위해 직렬화하는 데 걸린 시간
deserialization	받은 데이터를 해석(역직렬화)하는 데 걸린 시간
taskCount	메시지 처리를 가로막고 있었던 대기 중인 작업의 개수

예제 코드

사용법은 기존의 PerformanceObserver 패턴과 동일합니다. type에 'delayed-message'를 지정하여 관찰을 시작합니다.

// 성능 관찰자(PerformanceObserver) 생성
const observer = new PerformanceObserver((list) => {
  const entries = list.getEntries();
  entries.forEach((entry) => {
    console.log(`메시지 지연 발생!`);
    console.log(`- 전체 지연 시간: ${entry.duration}ms`);
    console.log(`- 차단된 시간 (blockedDuration): ${entry.blockedDuration}ms`);
    console.log(`- 직렬화/역직렬화 비용: ${entry.serialization + entry.deserialization}ms`);
    console.log(`- 방해한 작업 수: ${entry.taskCount}개`);
  });
});

// delayed-message 타입 관찰 시작
observer.observe({ type: 'delayed-message', buffered: true });

현재 상태와 트렌드

현재 W3C의 WICG(Web Incubator Community Group)에서 제안되어 크롬(Chromium) 엔진을 중심으로 구현 및 실험이 진행되고 있습니다.

또한 대규모 대시보드나 복잡한 협업 도구(Figma 같은 웹 앱)를 만드는 개발자들 사이에서 필수적인 성능 모니터링 도구로 자리 잡고 있습니다.