분리된 Dom 요소
분리된 DOM 요소는 DOM에서 제거되었지만 JavaScript로 인해 메모리가 여전히 유지되는 요소입니다. 즉, 요소에 변수 또는 개체에 대한 참조가 있는 한 DOM에서 삭제된 후에도 가비지 수집되지 않습니다.
DOM은 트리의 노드에 대한 참조가 가비지 수집에서 전체 트리를 중지시키는 이중 연결 트리와 같습니다.
자바스크립트에서 DOM 요소를 생성하는 예를 살펴보겠습니다. 요소를 만든 후에는 요소를 삭제하지만 요소를 보유하고 있는 변수를 삭제하는 것을 잊으십시오. 이 시나리오는 특정 DOM 요소뿐만 아니라 전체 트리에 대한 참조가 있는 Detached DOM으로 이어집니다.
예시
다음 예에서 DOM에서 제거된 후에도 'someText'는 전역 '값' 개체에서 참조를 유지합니다. 이것이 가비지 수집기에서 제거되지 않고 계속해서 메모리를 소비하는 이유입니다. 이로 인해 메모리 누수가 발생합니다.
<html>
<body>
<script>
var example = document.createElement("p");
example.id = "someText";
document.body.appendChild(example);
var value = {
text: document.getElementById('someText')
};
function createFun() {
value.text.innerHTML = "Javascript is not Java";
}
createFun();
function deleteFun() {
document.body.removeChild(document.getElementById('someText'));
}
deleteFun();
</script>
</body>
</html> 메모리 누수 방지
메모리 누수를 방지하기 위해 가장 좋은 방법은 var 예제를 리스너 내부에 넣어 지역 변수로 만드는 것입니다. var 예제가 삭제되면 객체의 경로가 차단되어 가비지 수집기가 메모리를 해제할 수 있습니다.