8
다음 코드는 DOM 변경 이벤트 DOMNodeInserted을 사용하여 body 요소의 존재를 감지하고 innerHTML을 래퍼로 래핑합니다. DOM 돌연변이 관찰자는 DOM 돌연변이 이벤트보다 느립니다?
<!DOCTYPE html>
<html lang="en">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
function DOMmanipulation() {
if (document.body) {
document.removeEventListener('DOMNodeInserted', DOMmanipulation);
// DOM manipulation start
document.body.innerHTML = '<div class="wrapper">' + document.body.innerHTML + '</div>';
// DOM manipulation end
}
}
document.addEventListener('DOMNodeInserted', DOMmanipulation);
</script>
</head>
<body>
<p>Lorem ipsum dolor sit amet.</p>
</body>
</html>
그리고 포장의 성공에도 불구하고
는 오류가 노드가 발견되지 않았 음을 보여주고있다. This answer은 jQuery가로드되었을 때 어떤 테스트를 수행하기 위해div 요소를 본문에 추가했으나 해당 요소가 래퍼에 래핑되었으므로 해당 요소가 제거되지 않았기 때문에
div 요소를 제거하지 못했습니다. 더 이상 신체의 자식 요소.
위의 실험은 DOMNodeInserted 이벤트가 jQuery를 제거 할 수 있습니다 전에 jQuery의 테스트 요소 (div가) 포장 얻었 기 때문에 jQuery의 테스트보다 더 빠르다는 것을 우리에게 알려줍니다.
<!DOCTYPE html>
<html lang="en">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
var observer = new WebKitMutationObserver(function() {
if (document.body) {
observer.disconnect();
// DOM manipulation start
document.body.innerHTML = '<div class="wrapper">' + document.body.innerHTML + '</div>';
// DOM manipulation end
}
});
observer.observe(document, { subtree: true, childList: true });
</script>
</head>
<body>
<p>Lorem ipsum dolor sit amet.</p>
</body>
</html>
이 코드는 오류를 발생시키지 않습니다. 즉, jQuery는 DOM Mutation Observers보다 빠르기 때문에 테스트 요소 (div)를 제거한 다음 해당 요소를 래퍼에 래핑 할 수있었습니다.
, 우리는 찾아 그 그것은 실행 속도에 관해서 :
- DOM 돌연변이 이벤트 > jQuery의 테스트
- jQuery의 테스트 > DOM 변이 관찰자
DOM Mutation Observers가 DOM Mutation Events보다 느리다는 것을 적절하게 증명할 수 있습니까?
감사합니다. @AshHeskes와 좋은 설명을 많이했습니다! 마침내 저는 그들의 사형 원리를 이해합니다. –