변형 이벤트의 지원 중단 및 계획된 삭제를 발표하고 2024년 7월에 삭제되기 전에 코드를 이전하는 방법을 공유합니다.
Chromium은 변형 이벤트를 공식적으로 지원 중단했으며 2024년 7월 23일에 안정화 버전으로 전환되는 버전 127부터 지원을 중단할 계획입니다. 이 게시물에서는 변형 이벤트를 삭제하는 이유를 설명하고 브라우저에서 삭제되기 전에 이전할 수 있는 경로를 제공합니다.
변형 이벤트란 무엇인가요?
변형 이벤트는 다음 이벤트 모음의 이름입니다.
DOMNodeInsertedDOMNodeRemovedDOMSubtreeModifiedDOMCharacterDataModifiedDOMNodeInsertedIntoDocumentDOMNodeRemovedFromDocument- (최신 브라우저에서 지원되지 않음)
DOMAttrModified - (최신 브라우저에서 지원되지 않음)
DOMAttributeNameChanged - (최신 브라우저에서 지원되지 않음)
DOMElementNameChanged
이러한 이벤트는 DOM 수준 2 사양의 매우 오래된 부분이며 2011년부터 지원 중단되었습니다. 2013년부터 모든 최신 브라우저에서 지원되는 MutationObserver 인터페이스로 대체되었습니다.
변형 이벤트 기록
변형 이벤트는 오래 전부터 좋은 아이디어처럼 보였지만 여러 심각한 결함이 있는 것으로 드러났습니다.
- 너무 장황하고 너무 자주 실행됩니다. 삭제된 각 노드에 대해 이벤트가 실행됩니다.
- 이벤트 전파로 인해 많은 UA 런타임 최적화를 방지하므로 느림.
- 이러한 코드는 비정상 종료를 자주 일으킵니다. 이벤트 리스너는 실행 중인 DOM 작업 아래의 전체 DOM을 변경할 수 있으므로 브라우저에서 많은 비정상 종료 및 보안 버그의 원인이 되었습니다.
이러한 결함으로 인해 2011년에 사양에서 이벤트가 지원 중단되었으며 2012년에 대체 API (MutationObserver)가 생성되었습니다. 새로운 API는 현재 10년 넘게 구현되어 작동하고 있습니다.
변형 이벤트가 삭제되는 이유
변형 이벤트에 대한 지원은 브라우저마다 다릅니다. 일부 이벤트(예: DOMNodeInsertedIntoDocument 및 DOMNodeRemovedFromDocument)는 일부 브라우저에서 지원되지 않습니다. 다른 이벤트의 경우 합의된 사양이 없으므로 특정 동작이 다릅니다. 하지만 '완료'되었고 이를 사용하는 페이지의 속도만 느려지므로 그대로 두면 안 되나요?라는 합리적인 질문이 있을 수 있습니다. 답변은 두 부분으로 구성됩니다.
첫째, 이러한 이벤트는 웹 플랫폼을 방해합니다. 웹이 발전하고 새로운 API가 추가되면서 이러한 기존 API의 존재를 고려해야 합니다. 이러한 이벤트를 지원해야 하기 때문에 새 API가 제안되지 않는 경우도 있습니다. 한 가지 예로 <iframe> 요소가 DOM 내에서 이동할 때 다시 로드되지 않도록 하는 오래된 요청이 있었습니다. 그러나 부분적으로는 변형 이벤트의 존재로 인해 이 작업을 실행하기가 너무 어렵다고 판단되어 요청이 종료되었습니다.
이러한 이벤트는 브라우저를 더 빠르게 만드는 데 계속 방해가 됩니다. 브라우저에 있는 최적화 기능을 사용해도 변형 이벤트를 사용하지 않는 페이지에서 성능 저하를 방지할 수는 없습니다. 변형 이벤트 리스너의 경우 여전히 여러 위치에서 확인이 필요합니다. 이러한 이벤트는 예상치 못한 방식으로 DOM을 변경할 수 있으므로 코드는 여전히 매우 방어적으로 작성해야 합니다.
이 이벤트가 공식적으로 지원 중단된 지 10년이 지났고 대체 API도 10년 넘게 사용 가능했으므로 이제 브라우저에서 대체 API를 완전히 삭제할 때가 되었습니다.
마이그레이션 방법
대신 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
타임라인 및 지원 중단 체험판 정보
2024년 7월 23일에 안정화 버전으로 전환되는 Chrome 127의 모든 사용자* 에게서 변형 이벤트가 삭제됩니다. 그보다 먼저 Canary, Dev, 베타 채널에서 사전 경고로 이벤트가 삭제되기 시작합니다.