#기본기13_자바스크립트에서 메모리 관리와 성능 최적화 방법

왜 메모리 관리, 성능최적화를 해야할까?

웹사이트를 사용하는 유저에게 답답함을 해소시켜 사용자 이탈을 막기 위함이다.

 

A. 메모리 관리

 -- 가비지 컬렉터(Garbage Collecter)에 대한 이해

• 자바스크립트는 가비지 컬렉터를 사용하여 사용하지 않는 메모리를 자동으로 확보한다.
• 가비지 컬렉터는 사용하지 않는 객체를 식별하고 제거한다.

메모리 누수의 일반적인 원인

 

1. 순환참조

•  순환 참조는 두 개 이상의 객체가 서로를 참조하여 가비지 컬렉터가 끊을 수 없는 순환을 생성할 때 발생
• 변수나 객체를 더 이상 사용하지 않을 때는 null 또는 undefined로 설정하여 해당 값에 대한 참조를 제거하고 가비지 컬렉터를 통해 메모리를 회수할 수 있다.

let person1 = {};
let person2 = {};

// 객체 1과 객체2 사이에 순환 참조를 생성
person1.왼쪽 = person2;
person2.오른쪽 = person1;

// null 또는 undefined로 설정하여 해당 값에 대한 참조를 제거
person1 = null;
person2 = null;

 

2. 이벤트리스너

• 이벤트 리스너가 더이상 필요하지 않을 때 리스너 함수를 제거하지 않으면 메모리 누수가 발생할 수 있음.
• removeEventListener(), EventTarget.removeAllListeners() 메서드로 불필요한 리스너를 제거.

let button = document.createElement('button');
const main = document.querySelector('main');
main.appendChild(button);
button.innerHTML = '클릭해주세요';

function clickButton() {
    console.log('버튼 클릭됨');
    button.classList.add('clicked')
    button.removeEventListener('click', clickButton) // 한번 클릭되고 그 후에 클릭 안됨
}

button.addEventListener('click', clickButton)

 

3. 전역변수

• 되도록 전역변수를 사용하지 않고 함수형스코핑 기법을 사용한다.
• 함수 안에서 변수를 선언하고 해당 함수 내에서만 접근할 수 있도록 한다, 함수가 더 이상 필요하지 않게 되면 변수가 자동으로 가비지 컬렉팅 된다.

let test = 7;  

function foo(para){
  let value = para + "lucky";
  console.log(value);
  test = null; // 전역변수 할당값을 null로 설정하여 참조 제거
  value = null; // value 변수에 할당된 값을 null로 설정하여 참조 제거
}

foo(test);

 

B. 성능최적화

 

1. 반복문 최적화

• 불필요한 반복문 사용을 지양한다.
• for문보다는 forEach, map, filter와 같은 고차함수를 사용한다.

2. DOM 조작최적화

• 가상DOM(virtual DOM)을 사용한다(react, vue, angular)

3. 이벤트 핸들링 최적화

• 이벤트 위임(Event Delegation)과 이벤트 버블링(Event Bubbling)을 활용하여 이벤트 핸들러의 성능을 최적화 한다. ex) 버튼 100개에 일일이 이벤트를 설정하지 않고, 상위 요소에 이벤트를 위임한다.

4. 비동기 코드 최적화

• Callback Hell을 피하고 Promise(.then), async/await 구문을 활용한다.

//callback hell
getUser(userId, function(user) {
  getPosts(user.id, function(posts) {
    getComments(posts[0].id, function(comments) {
      // 여기서 comments를 사용하여 작업을 수행합니다.
    });
  });
});
// Promise, .then()
getUser(userId)
  .then(function(user) {
    return getPosts(user.id);
  })
  .then(function(posts) {
    return getComments(posts[0].id);
  })
  .then(function(comments) {
    // 여기서 comments를 사용하여 작업을 수행합니다.
  })
  .catch(function(error) {
    // 오류 처리
  });
// async await 
async function fetchData(userId) {
  try {
    const user = await getUser(userId);
    const posts = await getPosts(user.id);
    const comments = await getComments(posts[0].id);
    // 여기서 comments를 사용하여 작업을 수행합니다.
  } catch (error) {
    // 오류 처리
  }
}

 

 

 

출처 : https://ykss.netlify.app/translation/javascript_memory_management/

(번역) 🔥 자바스크립트 메모리 관리: 일반적인 메모리 누수를 방지하고 성능을 개선하는 방법