JS - 메모리 사용 관련
1. 객체 참조 시
const obj = {
a: 1,
b: 2
};
function onClick() {
console.log(o.a);
}
위와 같은 코드에서 obj
는 a
, b
속성 두 가지를 갖고 있다.
실제로 console.log
에서 사용되는 값은 a
밖에 없지만 a
에 접근하기 위해 obj
객체 전체를 onClick
함수 범위에서 로딩해야 되기 때문에 b
도 메모리를 차지하게 된다.
즉, onClick
을 실행하면 obj
전체를 찾고, 그 중에서 a
만 사용하게 되는 것이다.
2. DOM 사용시 메모리 누수
const btn = document.querySelector('.btn');
const div = document.querySelector('.div');
btn.addEventListener('click', () => {
div.remove();
console.log(div);
})
위 코드는 btn
클래스를 갖고 있는 버튼을 클릭하면 div
클래스를 삭제 하는 코드다.
처음에 버튼을 클릭하면 div
가 삭제되는데 계속 클릭하게되면 이미 삭제된 div
에 계속 접근하려한다.
DOM
이 HTML
에서 사라져도 eventListener
의 callback
함수에는 참조가 계속 남아있는다.
이런 경우도 메모리 누수가 생기기 때문에 코드 수정이 필요하다.
const btn = document.querySelector('.btn');
btn.addEventListener('click', () => {
const div = document.querySelector('.div');
div.remove();
console.log(div);
})
위 같은 방법으로 callback
이 외부 변수를 계속 참조하는 것이 아니라 event
가 발생할 때 찾아서 실행하게 하는 것이다.
한 번 삭제하고 나면 다시 클릭했을 때 접근할 DOM
이 없기 때문에 에러가 난다.
또 다른 방법으로는 removeEventListener
를 이용해 event
를 끊는 것인데 코드구현은 따로 안했다.
3. 함수 인자
const obj = {
a: 1,
b: 2
}
function f(o) {
console.log(o.a);
}
f(obj);
obj
의 속성 중 a
를 console.log
로 출력하는 함수가 있다.
위 처럼 구현을 하게되면 함수 인자로 객체 전체가 참조되는데 만약 객체에 속성값이 엄청 많다면 메모리 사용이 그만큼 늘어날 것이다.
const obj = {
a: 1,
b: 2
}
function f(p) {
console.log(p);
}
f(obj.a);
그래서 위처럼 특정 속성값을 전달해 메모리 사용량을 줄이는 방법도 있다.
Author And Source
이 문제에 관하여(JS - 메모리 사용 관련), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://velog.io/@hemtory/JSMemory
저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
const obj = {
a: 1,
b: 2
};
function onClick() {
console.log(o.a);
}
위와 같은 코드에서 obj
는 a
, b
속성 두 가지를 갖고 있다.
실제로 console.log
에서 사용되는 값은 a
밖에 없지만 a
에 접근하기 위해 obj
객체 전체를 onClick
함수 범위에서 로딩해야 되기 때문에 b
도 메모리를 차지하게 된다.
즉, onClick
을 실행하면 obj
전체를 찾고, 그 중에서 a
만 사용하게 되는 것이다.
const btn = document.querySelector('.btn'); const div = document.querySelector('.div'); btn.addEventListener('click', () => { div.remove(); console.log(div); })
위 코드는
btn
클래스를 갖고 있는 버튼을 클릭하면div
클래스를 삭제 하는 코드다.
처음에 버튼을 클릭하면div
가 삭제되는데 계속 클릭하게되면 이미 삭제된div
에 계속 접근하려한다.
DOM
이HTML
에서 사라져도eventListener
의callback
함수에는 참조가 계속 남아있는다.
이런 경우도 메모리 누수가 생기기 때문에 코드 수정이 필요하다.const btn = document.querySelector('.btn'); btn.addEventListener('click', () => { const div = document.querySelector('.div'); div.remove(); console.log(div); })
위 같은 방법으로
callback
이 외부 변수를 계속 참조하는 것이 아니라event
가 발생할 때 찾아서 실행하게 하는 것이다.
한 번 삭제하고 나면 다시 클릭했을 때 접근할DOM
이 없기 때문에 에러가 난다.또 다른 방법으로는
removeEventListener
를 이용해event
를 끊는 것인데 코드구현은 따로 안했다.
3. 함수 인자
const obj = {
a: 1,
b: 2
}
function f(o) {
console.log(o.a);
}
f(obj);
obj
의 속성 중 a
를 console.log
로 출력하는 함수가 있다.
위 처럼 구현을 하게되면 함수 인자로 객체 전체가 참조되는데 만약 객체에 속성값이 엄청 많다면 메모리 사용이 그만큼 늘어날 것이다.
const obj = {
a: 1,
b: 2
}
function f(p) {
console.log(p);
}
f(obj.a);
그래서 위처럼 특정 속성값을 전달해 메모리 사용량을 줄이는 방법도 있다.
Author And Source
이 문제에 관하여(JS - 메모리 사용 관련), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://velog.io/@hemtory/JSMemory
저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
const obj = {
a: 1,
b: 2
}
function f(o) {
console.log(o.a);
}
f(obj);
obj
의 속성 중 a
를 console.log
로 출력하는 함수가 있다.
위 처럼 구현을 하게되면 함수 인자로 객체 전체가 참조되는데 만약 객체에 속성값이 엄청 많다면 메모리 사용이 그만큼 늘어날 것이다.
const obj = {
a: 1,
b: 2
}
function f(p) {
console.log(p);
}
f(obj.a);
그래서 위처럼 특정 속성값을 전달해 메모리 사용량을 줄이는 방법도 있다.
Author And Source
이 문제에 관하여(JS - 메모리 사용 관련), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@hemtory/JSMemory저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)