성능 최적화와 메모리 관리

개념 설명

JavaScript 애플리케이션의 실행 속도를 향상시키고 메모리 사용을 최적화하는 기법들로, 알고리즘 개선, DOM 조작 최소화, 메모리 누수 방지 등을 통해 사용자 경험을 개선.

핵심 포인트

• DOM 조작은 배치 처리, DocumentFragment 활용으로 리플로우 최소화
• 루프 최적화: 길이 캐싱, 역순 루프, for...of 보다 일반 for 루프가 빠름
• 객체 풀링으로 GC 압력 감소, WeakMap으로 자동 메모리 정리
• requestAnimationFrame으로 60fps 애니메이션 구현

예시 코드

// DOM 조작 최적화 - DocumentFragment
const fragment = document.createDocumentFragment();
for (let i = 0; i < 1000; i++) {
  const div = document.createElement('div');
  div.textContent = i;
  fragment.appendChild(div);
}
document.body.appendChild(fragment); // 한 번만 리플로우