이 페이지는 Cloud Translation API를 통해 번역되었습니다.

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

변형 이벤트의 지원 중단 및 예정된 삭제를 발표하고 2024년 7월 삭제 전에 코드를 마이그레이션하는 방법을 공유합니다.

Mason Freed

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

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

변형 이벤트는 다음과 같은 이벤트 컬렉션의 이름입니다.

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

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

변형 이벤트 기록

돌연변이 이벤트는 오래 전에는 좋은 아이디어 같았지만 몇 가지 치명적인 결함이 있는 것으로 밝혀졌습니다.

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

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

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

변형 이벤트 지원은 브라우저에 따라 다릅니다. 일부 이벤트(예: DOMNodeInsertedIntoDocument 및 DOMNodeRemovedFromDocument)는 일부 브라우저에서 지원되지 않습니다. 그 외 다른 이벤트의 경우 합의된 사양이 없어 특정 동작이 달라집니다. 그러나 합리적인 질문은 다음과 같을 수 있습니다. '완료'되었고 사용하는 페이지의 속도만 느려지게 하므로 그냥 그대로 두는 것은 어떨까요? 답은 두 부분으로 구성됩니다.

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

이러한 이벤트는 계속해서 브라우저 속도를 개선하는 데 방해가 됩니다. 변형 이벤트를 사용하지 않는 페이지에서 성능 저하를 피하려는 브라우저에 최적화가 적용되어 있더라도 완벽하지는 않습니다. 변형 이벤트 리스너는 여전히 여러 위치에서 검사를 수행해야 합니다. 이러한 이벤트는 놀랍게도 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개월의 마이그레이션 기간을 추가로 제공합니다.