자바스크립트 성능 최적화 5가지 방법

웹 애플리케이션이 점점 커지면서 성능은 사용자 경험을 좌우하는 중요한 요소가 되었어요. 특히 자바스크립트는 브라우저에서 직접 실행되기 때문에 최적화를 신경 쓰지 않으면 렉, 느린 로딩, 잦은 멈춤 현상이 생기죠. 오늘은 실무에서 바로 적용할 수 있는 자바스크립트 성능 최적화 5가지 방법을 정리해봤습니다.

---

1. 불필요한 DOM 조작 줄이기

DOM 조작은 비싼 연산입니다. 매번 document.querySelector로 엘리먼트를 찾고 innerHTML을 바꾸면 브라우저가 계속해서 렌더링을 다시 해야 해요.
👉 해결 방법:

• DOM 엘리먼트는 캐싱해서 재사용하기
• 여러 변경은 DocumentFragment를 활용해서 한 번에 추가하기
• innerHTML += 대신 appendChild/insertAdjacentHTML 등을 적극적으로 활용

---

2. 이벤트 위임(Event Delegation) 사용

리스트 항목 100개마다 클릭 이벤트를 각각 걸어두면 브라우저는 100개의 리스너를 관리해야 합니다.
👉 해결 방법:

• 부모 요소에 이벤트를 한 번만 등록하고, 이벤트 버블링을 이용해 처리
• 예: ul에 클릭 이벤트를 걸고, event.target을 확인해서 클릭된 li를 처리

---

3. 비동기 처리 최적화

동기적으로 무거운 작업을 실행하면 UI가 멈춰버립니다.
👉 해결 방법:

• setTimeout, requestAnimationFrame, Web Worker 등을 활용해 UI 스레드를 차단하지 않기
• 네트워크 요청은 async/await와 Promise.all로 병렬 처리하기

---

4. 반복문 최적화

작은 차이 같아도 대량 데이터에서는 성능 차이가 납니다.
👉 해결 방법:

• for...of나 for 루프는 상황에 맞게 선택
• 배열에서 중복된 계산(arr.length)은 루프 밖에서 미리 변수에 저장
• .map().filter().reduce()를 중첩 사용하는 것보다, 한 번의 for문에서 처리하는 게 빠를 때가 있음

---

5. 불필요한 리렌더링 줄이기 (SPA 프레임워크 활용 시)

React, Vue 같은 프레임워크에서는 리렌더링이 성능 병목이 될 수 있습니다.
👉 해결 방법:

• React에서는 memo, useMemo, useCallback을 활용
• Vue에서는 v-once, 컴포넌트 분리로 렌더 범위를 줄이기
• 상태 관리(store) 변경을 최소화하고, 꼭 필요한 부분만 다시 그리도록 설계

---

✨ 마무리

성능 최적화는 “한 방에 끝내는 해법”이 아니라, 작은 최적화들이 쌓여서 큰 차이를 만드는 작업이에요. 처음부터 모든 걸 최적화하려 하기보단, 크롬 DevTools Performance 탭 같은 툴로 병목을 확인한 후 우선순위를 두고 개선하는 게 효율적입니다.