JavaScript에서 DOM 트리에 추가되지 않은 함수 내에서 생성 된 노드가 공간을 혼란시키지 않습니까?

Question

코드 가독성을 위해 상단 블록의 범위에있는 모든 변수를 선언하는 습관이 있습니다. 문서의 본문에 추가되지 않은 함수 범위 내부의 노드가 공간을 어지럽히고 성능을 저하시킬 것으로 의심됩니다. 그들에게 무슨 일이 일어나는가? 그리고 일반적으로 함수 범위 내에서 만들어진 변수는 어떻게됩니까? 기능이 실행 된 후에 파괴 되었습니까? 메모리 할당 해제에 대해 걱정할 필요가 있습니까? 범위의 맨 위에있는 블록에서 변수를 선언하는 것이 좋은 습관입니까, 아니면 필요할 때 또는 조건이 사실 일 때만 그 변수를 선언하는 것이 좋습니다. 이는 런타임 성능을 향상시키는 데 도움이됩니까?

함수 같이 가정한다 :

function myfunc() { 
    var someNode = document.createElement('div'); 
    if(someCondition) { // add the node only if some condition is true 
     document.body.appendChild(someNode); 
    } 

이 같은 기능을 V.S :

function myfunc() { 
    if(someCondition) { // create and add the node only if some condition is true 
     var someNode = document.createElement('div'); 
     document.body.appendChild(someNode); 
    } 
} 

Answer 1

자바 가비지 컬렉션 자동 메모리 관리를 구현한다. 데이터를 참조하는 범위에 변수가 없으면 메모리를 다시 확보해야합니다. 그래서 당신의 예제에서, 사용하지 않는 DIV는 함수가 종료 될 때 (또는 다음 가비지 콜렉션이 발생하는 직후) 파괴 될 것입니다.

그러나 필요하지 않은 개체를 만드는 것을 피하는 것이 좋습니다. 함수가 실행되는 동안 시간이 걸리고 메모리를 사용합니다. 작고 단순한 객체 (즉, 문자로 {...} 문법을 사용하여 생성 한 객체)와 배열은 그리 좋지 않지만 노드는 꽤 복잡한 객체입니다.