특정 ID를 가진 요소가 DOM에 삽입 될 때 가장 효율적인 방법은 무엇입니까

Question

제목에서 알 수 있듯이 특정 ID 또는 CSS 클래스가있는 요소가 DOM에 삽입 될 때 정확한 타임 스탬프를 감지하고 싶습니다 (그리고 제거되었을 때도 감지 할 수 있습니다). 가장 확실한 방법은 발견하고자하는 요소의 ID가 document.getElementById 인 문서를 주기적으로 폴링하는 것입니다. 그러나이 방법은 정확하지 않으며 탐지하려는 요소가 여러 개인 경우 매우 집중적으로 처리 할 수 ​​있습니다.

나는 Mutation Events과 Mutation Observers을 살펴 봤지만 요소가 삽입되거나 제거되었는지 감지하기 위해 루트 DOM 요소에 수신기를 추가해야하는데 이는 성능에 크게 영향을 미칠 수 있습니다. 요소가 페이지에 삽입되거나 제거 될 때마다 추가 JS를 실행해야합니다.

알고 있지 않은 더 최적화 된 솔루션이 있습니까? 또한 jQuery조차도 외부 JS 라이브러리를 사용하지 않는 것이 좋습니다.

Answer 1

CSS 애니메이션 이벤트를 사용하여 특정 노드가 삽입되었을 때를 감지하는 더 효율적인 방법이 있습니다.

@keyframes widget_inserted { 
    from { z-index: 1; } 
    to { z-index: 1; } 
} 

.widget { 
    animation-duration: 0.001s; 
    animation-name: widget_inserted; 
} 

내가 Z-index 속성을 선택한 대부분의 경우는 사실상에 효과를 추가해야하기 때문에 :

당신은, 당신이 듣고있는 클래스에 띄지 애니메이션을 정의 할 수는 widget_inserted을 말할 수 있습니다 삽입되는 요소 매우 짧은 애니메이션 지속 시간과 함께 이러한 추가 된 CSS 속성은 원본 문서를 추가로 변경하지 않아야합니다.

widget 클래스 요소가 삽입 될 때 이제 당신이 문서에 animationstart 이벤트 리스너를 부착하는 경우, 당신은 정확한 순간을 잡을 수 있어야한다 :

document.addEventListener('animationstart', function(event) { 
    if (event.animationName == 'widget_inserted') { 
     ... 
    } 
}); 

당신은 라이브 demo here

를 볼 수 있습니다

Answer 2

iframe 요소는 load/unoad 이벤트를 트리거합니다. 당신은보고 싶은 요소에 멍청한 iframe을 삽입 할 수 있습니다. 그리고 원래 요소에서 '로드'이벤트를 직접 트리거 할 수 있습니다. example