변형 이벤트가 Chrome에서 삭제됩니다.

변형 이벤트의 지원 중단 및 계획된 삭제에 대해 공지하고 2024년 7월에 삭제되기 전에 코드를 이전하는 방법을 공유합니다.

Mason Freed
Mason Freed
X GitHub

Chromium은 변형 이벤트를 공식적으로 지원 중단했으며 2024년 7월 23일에 안정화 버전으로 전환되는 버전 127부터 지원을 중단할 계획입니다. 이 게시물에서는 변형 이벤트를 삭제하는 이유와 브라우저에서 이벤트가 삭제되기 전에 마이그레이션하는 경로를 설명합니다.

변형 이벤트란 무엇인가요?

변형 이벤트는 다음 이벤트 모음의 이름입니다.

  • DOMNodeInserted
  • DOMNodeRemoved
  • DOMSubtreeModified
  • DOMCharacterDataModified
  • DOMNodeInsertedIntoDocument
  • DOMNodeRemovedFromDocument
  • (최신 브라우저에서 지원되지 않음) DOMAttrModified
  • (최신 브라우저에서 지원되지 않음) DOMAttributeNameChanged
  • (최신 브라우저에서 지원되지 않음) DOMElementNameChanged

이러한 이벤트는 DOM 수준 2 사양의 매우 오래된 부분이며 2011년부터 지원 중단되었습니다. 이 기능은 2013년 이후 모든 최신 브라우저에서 지원된 MutationObserver 인터페이스로 대체되었습니다.

변형 이벤트의 기록

예전에는 돌연변이 이벤트가 좋은 아이디어처럼 보였지만 몇 가지 치명적인 결함이 있는 것으로 밝혀졌습니다.

  • 너무 장황하고 너무 자주 실행됩니다. 삭제된 각 노드에 대해 이벤트가 시작됩니다.
  • 이벤트 전파로 인해 그리고 많은 UA 런타임 최적화를 방해하기 때문에 느립니다.
  • 이로 인해 비정상 종료가 발생하는 경우가 많습니다. 이벤트 리스너는 실행 중인 DOM 작업 아래에서 전체 DOM을 변경할 수 있기 때문에 이러한 이벤트로 인해 브라우저에서 비정상 종료와 보안 버그가 많이 발생합니다.

이러한 결함으로 인해 해당 이벤트는 2011년에 사양에서 지원 중단되었으며 대체 API (MutationObserver)는 2012년에 구축되었습니다. 현재 새로운 API는 10년 넘게 구현되고 작동되어 왔습니다.

변형 이벤트가 삭제되는 이유

변형 이벤트의 지원은 브라우저에 따라 다릅니다. DOMNodeInsertedIntoDocument 및 DOMNodeRemovedFromDocument와 같은 일부 이벤트는 일부 브라우저에서만 지원됩니다. 다른 이벤트의 경우 합의된 사양이 없으므로 특정 동작이 달라집니다. 하지만 '완료'했으니 그냥 그대로 두지 않죠 사용하는 페이지만 느려지게 하는 건가요? 답은 두 부분으로 구성됩니다.

첫째, 이러한 이벤트는 웹 플랫폼을 지연시키고 있습니다. 웹이 발전하고 새로운 API가 추가됨에 따라 이러한 기존 API의 존재를 고려해야 합니다. 때로는 이러한 이벤트를 지원해야 하는 것만으로도 새 API가 제안되지 않을 수 있습니다. 한 가지 예로, DOM 내에서 이동할 때 <iframe> 요소가 다시 로드되지 않도록 하는 오래 지속되는 요청이 있었습니다. 그러나 부분적으로는 변형 이벤트의 존재로 인해 이러한 노력을 달성하기 너무 어려운 것으로 간주되어 요청이 종료되었습니다.

이러한 이벤트는 계속해서 브라우저를 더 빠르게 만드는 데 방해가 됩니다. 변형 이벤트를 사용하지 않는 페이지에 대한 성능 저하를 피하기 위해 브라우저가 최적화하더라도 완벽한 것은 아닙니다. 변형 이벤트 리스너의 경우 여전히 여러 위치에서 검사해야 합니다. 이러한 이벤트가 놀라운 방식으로 DOM을 변경할 수 있기 때문에 코드를 매우 방어적으로 작성해야 합니다.

이벤트가 공식적으로 지원 중단된 지 10년이 넘었고 대체 API가 마찬가지로 10년 넘게 사용 가능해 왔으므로, 마침내 브라우저에서 변형 이벤트를 완전히 제거할 때가 되었습니다.

마이그레이션 방법

대신 MutationObserver 사용

MutationObserver에 관한 문서는 MDN에 있으며 상당히 완전합니다. 코드베이스를 교체하는 방법은 이러한 이벤트가 사용되는 방식에 따라 다르지만, 예를 들면 다음과 같습니다.

// Old mutation event usage:  
target.addEventListener('DOMNodeInserted',event => doSomething(event.target));

// Replacement mutation observer code:  
const observer = new MutationObserver(mutationList =>  
  mutationList.filter(m => m.type === 'childList').forEach(m => {  
    m.addedNodes.forEach(doSomething);  
  }));  
observer.observe(target,{childList: true, subtree: true});

MutationObserver 코드가 원래 DOMNodeInserted 이벤트 리스너 코드보다 크게 보이지만 이벤트 핸들러를 여러 번 호출하는 대신 전체 트리에서 발생하는 모든 변형을 한 번의 호출로 처리할 수 있습니다.

폴리필

MutationObserver로 구동되는 동시에 기존 코드가 계속 작동하도록 하는 폴리필이 있습니다. 폴리필은 GitHub에 또는 npm 패키지로 있습니다.

타임라인 및 지원 중단 기능 트라이얼 정보

모든 사용자* 를 대상으로 Chrome 127에서 변형 이벤트가 삭제되며, 2024년 7월 23일에 안정화 버전이 출시됩니다. 해당 이벤트는 조기 경고로 그 이전에 Canary, 개발자, 베타 채널에서 삭제될 예정입니다.

  • 코드를 이전하는 데 시간이 더 필요한 경우 (2024년 7월 이후) 지원 중단 기능 트라이얼을 사용하면 지정된 사이트에서 이벤트를 일시적으로 다시 사용 설정할 수 있습니다. 엔터프라이즈 사용자와 유사한 방식으로 작동하는 MutationEventsEnabled이라는 엔터프라이즈 정책도 있습니다. 이러한 옵션 중 하나는 필요한 경우 마이그레이션에 약 9개월의 추가 시간을 제공합니다.