자바스크립트 메모리관리 질문입니다.

안녕하세요, 1년차 초보개발자입니다.

개인 프로젝트로 프레임워크 없이 JQuery를 이용한 Single Page Application를 직접 만들어보고 있습니다.

상단에 header, 하단에 footer를 불러오고, 이를 제외한 body 부분에서 각 페이지의 htmljavascript를 동적으로 불러오고 있습니다.

html파일은 불러올 때 마다 JQuery remove()를 사용하여 기존의 코드를 삭제하니 문제가 없지만, Javascript는 변수나 함수가 선언될 때 메모리가 할당되는데

페이지가 전환되면 새로이 로딩되는 Javascript 구문이 또다시 메모리할당을 받을 뿐 메모리 할당 해제를 명시적으로 해 주지는 않습니다.

(SPA는 새로고침을 하지 않으므로)페이지 전환이 10번만 되어도 Javascript 파일 10개분량의 변수, 함수가 공존하게 되는 것이 아닌가요? 제 생각에 이는 메모리누수를 불러올 것 같습니다.

검색해 보니 각 브라우저마다 Garbage Collection기능이 존재하는데, 전적으로 GC에 의지해야 하는 걸까요?

혹시 여러분들은 어떤식으로 이 문제를 해결하고 계신가요?

scope chain의 기준이 되는 scope를 벗어나면 GC에 의해 해제 됩니다.
예를 들어,
function foo () {
var a = 10;
}
foo();
에서 a는 실행된 후 GC에 의해 해제됩니다.

하지만 클로저를 사용한 경우에는 다릅니다.

function foo() {
var a = 10;
return function() {
console.log(a);
}
}

var bar = foo();
bar();

이 경우에는 bar() 이후에도 a는 메모리에 남게됩니다.

위를 이용해서 메모리 해제를 합니다. 사실 클로저를 사용할 때를 제외하고는 메모리에 대해 크게 걱정하지 않습니다. 사실 전역 공간을 더럽힌다고 하는데 전역 공간에 변수를 선언해서 사용하는 건 지양합니다.

페이지를 10번 새로고침한다면 (여기서 새로고침은 페이지 refresh가 아니라 remove() 등을 통해 페이지 이동 없이 현재 페이지에서 내용을 바꾸는 것으로 고려한다면)변수, 함수 역시 위의 기준대로 남아있고 없어집니다. 즉, 10번 남게 만드셨나면 10번 남고
(예를 들어 전역공간의 배열 var arr = [] 에 새로고침마다 push() 를 사용해서 값을 넣는다면)
그렇지 않다면 매번 남지 않을 것입니다.

3개의 좋아요

GC는 참조가 없어진 함수나 변수를 대상으로 동작합니다.

클로저를 사용한 경우 null 을 대입해서 참조를 없애주시면 됩니다.

ajax로 불러온 데이터를 클로저나 글로벌 변수의 object나 배열에 담아서 참조가 계속 유지되는 상태가 아니라면 메모리는 걱정하지 않으셔도 됩니다.

3개의 좋아요

자세한 답변 감사합니다 :slight_smile:

정말 많은 도움 되었습니다 :slight_smile:

requirejs를 사용 하시면 한번 로드한 파일을 다시 로드 하지 않습니다.
권장 드립니다.

3개의 좋아요

앗 감사합니다. 구글링해보니 AMD방식 라이브러리중에서는 가장 좋다고도 하네요 ㅎㅎ사용해보겠습니다.