[JavaScript 문법] 34일차: JavaScript 성능 최적화

성능 최적화란?

JavaScript 성능 최적화는 웹 애플리케이션의 실행 속도와 사용자 경험을 향상시키기 위한 다양한 기법을 포함합니다. 주요 최적화 영역은 메모리 관리, 렌더링 최적화, 코드 스플리팅 등입니다.

메모리 관리

메모리 관리는 효율적인 자원 활용과 메모리 누수를 방지하는 데 중요합니다. 잘못된 메모리 관리는 성능 저하와 프로그램 크래시를 유발할 수 있습니다.

가비지 컬렉션 이해

JavaScript는 자동 메모리 관리(가비지 컬렉션)를 사용합니다. 가비지 컬렉터는 더 이상 사용되지 않는 객체를 식별하고 메모리를 해제합니다.

메모리 누수 방지

메모리 누수는 더 이상 필요하지 않은 메모리를 해제하지 않아 발생합니다. 이를 방지하기 위해서는 다음과 같은 방법을 사용합니다:

1. 전역 변수 최소화: 전역 변수는 가비지 컬렉션에서 제외될 수 있으므로 사용을 최소화합니다.
2. 타이머와 이벤트 리스너 해제: 사용이 끝난 타이머와 이벤트 리스너는 명시적으로 해제합니다.
3. 클로저 주의: 클로저는 외부 함수의 변수를 참조하므로, 불필요한 참조를 제거합니다.

예제: 메모리 누수 방지

function createClosure() {
  let largeArray = new Array(1000000).fill('*');
  return function() {
    console.log(largeArray.length);
  };
}

let closure = createClosure();
closure();

// 클로저를 더 이상 사용하지 않을 때 참조를 제거
closure = null;

렌더링 최적화

렌더링 최적화는 DOM 업데이트와 레이아웃 계산을 효율적으로 관리하여 페이지의 반응성을 향상시킵니다.

Reflow와 Repaint 이해

• Reflow: 레이아웃 계산을 다시 수행하는 과정으로, DOM 요소의 크기와 위치가 변경될 때 발생합니다.
• Repaint: 요소의 스타일이 변경될 때 발생하며, 레이아웃 계산 없이 화면에 다시 그리는 작업입니다.

렌더링 최적화 기법

1. DOM 조작 최소화: 여러 번의 DOM 조작을 하나의 작업으로 묶어 수행합니다.
2. 오프셋 높이와 너비 캐싱: 반복적인 레이아웃 계산을 피하기 위해 값을 캐싱합니다.
3. 스타일 변경 최소화: 스타일 변경 시 가능한 한 CSS 클래스를 사용합니다.

예제: DOM 조작 최소화

// 비효율적인 방식
for (let i = 0; i < 100; i++) {
  let div = document.createElement('div');
  div.textContent = i;
  document.body.appendChild(div);
}

// 효율적인 방식
let fragment = document.createDocumentFragment();
for (let i = 0; i < 100; i++) {
  let div = document.createElement('div');
  div.textContent = i;
  fragment.appendChild(div);
}
document.body.appendChild(fragment);

코드 스플리팅

코드 스플리팅은 애플리케이션의 번들 파일을 여러 개의 작은 파일로 나누어 초기 로딩 시간을 단축하는 방법입니다. 이는 주로 Webpack과 같은 모듈 번들러를 사용하여 구현됩니다.

Webpack을 사용한 코드 스플리팅

Webpack은 애플리케이션의 엔트리 포인트와 의존성을 분석하여 최적의 코드 스플리팅을 자동으로 수행할 수 있습니다.

예제: 코드 스플리팅 설정

// webpack.config.js
module.exports = {
  entry: {
    main: './src/index.js',
    vendor: './src/vendor.js'
  },
  output: {
    filename: '[name].bundle.js',
    path: __dirname + '/dist'
  },
  optimization: {
    splitChunks: {
      chunks: 'all'
    }
  }
};

동적 임포트

동적 임포트는 특정 조건에서 모듈을 비동기로 로드할 수 있는 방법입니다.

예제: 동적 임포트

// 동적 임포트를 사용한 모듈 로딩
document.getElementById('loadButton').addEventListener('click', () => {
  import('./module.js').then(module => {
    module.loadFunction();
  });
});

결론

JavaScript 성능 최적화는 웹 애플리케이션의 효율성을 높이고 사용자 경험을 향상시키는 데 중요한 역할을 합니다. 이번 글에서는 메모리 관리, 렌더링 최적화, 코드 스플리팅과 같은 주요 최적화 기법에 대해 배웠습니다. 다음 글에서는 모던 JavaScript 문법에 대해 알아보겠습니다.

다음 글에서 만나요!