DOMSubtreeModified 이녀석 알아보자.

갑자기, DOMSubtreeModified 이녀석으로 인해 당혹스러운 문제가 생겨서..

[Deprecation] Listener added for a 'DOMSubtreeModified' mutation event. This event type is deprecated, and will be removed from this browser VERY soon. Usage of this event listener will cause performance issues today, and represents a large risk of imminent site breakage. Consider using MutationObserver instead. See <URL> for more information.

크롬에서 열심히 보여주며, 경고를 주었던건가...?
갑자기 잘 사용하던 웹사이트에서 크롬과 엣지에서만 이상하게 동작을 하는게 아니였나,
DOMSubtreeModified으로 데이터를 가져와서 확인하고 있었는데, 연쇄적으로 몇군데 데이터확인용이였는데..
그래서 터짐김에 알아보자라는 시간을 가져보겠다.

먼저 그럼 크롬에서 주구장창 대신 사용하라고 하는, MutationObserver 과 비교해서 알아보자.

 

DOMSubtreeModified

‣ 이벤트 기반 방식: DOMSubtreeModified는 DOM의 변경 사항이 발생할 때 트리거되는 이벤트입니다.

‣ 낮은 성능: 모든 DOM 변경마다 이벤트가 발생하기 때문에 성능에 부정적인 영향을 미칠 수 있습니다. 특히 많은 변경이 발생하는 경우 문제가 될 수 있습니다.

‣ 오래된 표준: 이 이벤트는 오래된 DOM Level 2 이벤트 모델의 일부로, 현재는 더 이상 권장되지 않으며 대부분의 최신 브라우저에서 사용되지 않습니다.

‣ 지원 중단: 대부분의 최신 브라우저에서는 이 이벤트의 지원을 중단했으며, 앞으로도 사용이 권장되지 않습니다.

코드예시

// 변경을 관찰할 대상 노드
var targetNode = document.getElementById('some-id');

// 콜백 함수는 변경 사항이 발생할 때 호출됩니다.
var callback = function(event) {
    console.log('DOM subtree modified:', event);
    // 변경 사항에 대한 추가 로직을 여기에 작성할 수 있습니다.
};

// DOMSubtreeModified 이벤트 리스너를 추가합니다.
targetNode.addEventListener('DOMSubtreeModified', callback, false);

// 나중에 이벤트 리스너를 제거하고 싶을 때는 다음과 같이 호출합니다.
// targetNode.removeEventListener('DOMSubtreeModified', callback, false);

 

 

MutationObserver

‣ 객체 기반 방식: MutationObserver는 객체를 통해 DOM의 변화를 관찰하고, 일정 시간 동안 발생한 모든 변화를 한꺼번에 콜백 함수로 전달합니다.

‣ 고성능: 효율적이고 비동기적으로 동작하여 성능에 미치는 영향을 최소화합니다. 대량의 DOM 변화를 한 번에 처리할 수 있습니다.

‣ 최신 표준: 최신 웹 표준에 따라 설계되었으며, 현재 모든 최신 브라우저에서 지원됩니다.

‣ 유연성: 다양한 옵션을 통해 관찰하려는 변경 사항(속성 변화, 자식 노드 추가/제거 등)을 세밀하게 제어할 수 있습니다.

코드예시

// 변경을 관찰할 대상 노드
var targetNode = document.getElementById('some-id');

// 변경 사항을 관찰할 구성 옵션
var config = { attributes: true, childList: true, subtree: true };

// 콜백 함수는 변경 사항 리스트와 관찰된 객체를 인수로 받습니다.
var callback = function(mutationsList, observer) {
    for(var mutation of mutationsList) {
        if (mutation.type == 'childList') {
            console.log('A child node has been added or removed.');
        }
        else if (mutation.type == 'attributes') {
            console.log('The ' + mutation.attributeName + ' attribute was modified.');
        }
    }
};

// MutationObserver 인스턴스 생성 및 대상 노드 관찰 시작
var observer = new MutationObserver(callback);
observer.observe(targetNode, config);

// 나중에 관찰을 중지하고 싶을 때는 다음과 같이 호출합니다.
// observer.disconnect();

 

 

다시 생각해보면 크롬 친절하다.

하나 하나에 관심이 필요한 시대인가..
세상 쉬운일 하나 없다.