변형 이벤트의 지원 중단 및 예정된 삭제를 발표하고 2024년 7월 삭제 전에 코드를 마이그레이션하는 방법을 공유합니다.
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 패키지로 있습니다.
- https://github.com/mfreed7/mutation-events-polyfill#readme
- https://www.npmjs.com/package/mutation-events
타임라인 및 지원 중단 체험판 정보
모든 사용자* 의 Chrome 127에서 변형 이벤트가 삭제되고 2024년 7월 23일에 안정화 버전이 출시됩니다. 해당 이벤트는 조기 경고로서 Canary, 개발자, 베타 채널에서 삭제되기 시작합니다.
- 코드를 이전하는 데 시간이 더 필요한 경우 (2024년 7월 이후) 지원 중단 무료 체험을 이용하면 지정된 사이트에서 해당 이벤트가 일시적으로 다시 사용 설정됩니다. 기업 사용자에게 비슷한 방식으로 작동하는
MutationEventsEnabled
라는 엔터프라이즈 정책도 있습니다. 이 두 가지 옵션 모두 필요한 경우 약 9개월의 마이그레이션 기간을 추가로 제공합니다.