JavaScript 성능 최적화 실전편｜렌더링, 메모리, 디바운스/스로틀까지 한 번에!
⚙️ JavaScript 성능 최적화 실전편｜렌더링 최소화부터 메모리 관리, 디바운스/스로틀까지
안녕하세요, 퍼블리셔 노미입니다! 😊
화려한 기능과 완벽한 UI도 좋지만, 웹 성능이 떨어지면 사용자 경험은 순식간에 무너집니다. 📉
이번 글에서는 JavaScript 성능 최적화를 주제로 화면 렌더링, 메모리, 이벤트 최적화까지 실전 중심으로 완전 정리해볼게요.
- ⚡ 렌더링 최소화 전략
- 🧠 메모리 누수 방지
- ⏳ 디바운스 / 스로틀 실전 사용법
- 🛠️ 성능 측정 도구 소개
지금부터 성능 좋은 코드로 함께 성장해봐요! 🔥
⚡ 렌더링 최소화를 위한 핵심 전략
렌더링은 사용자가 가장 민감하게 체감하는 성능 포인트입니다. 자주, 과하게, 불필요하게 렌더링되면 성능이 뚝! 떨어져요. 🥶
1. DOM 접근 최소화
// 나쁜 예
document.querySelector('.box').innerHTML = 'Hello!';
document.querySelector('.box').style.color = 'red';
// 좋은 예
const box = document.querySelector('.box');
box.innerHTML = 'Hello!';
box.style.color = 'red';
- ✅ DOM 참조는 변수에 캐싱
- ✅ DOM 조작은 배치해서 최소 횟수만
2. 리플로우/리페인트 줄이기
DOM 변경 → 브라우저는 레이아웃 계산 → 다시 그림을 그려요 이 과정이 리플로우(reflow)와 리페인트(repaint)입니다.
리플로우 발생 요소 예:
- 📏 요소 크기/위치 변경
- 📦 클래스 추가/삭제
- 🧭 DOM 삽입/삭제
→ 배치를 잘 관리하고, 자주 바뀌는 요소는 레이어로 분리!
🧠 메모리 누수 방지 전략
메모리 누수(Memory Leak)는 사용하지 않는 데이터가 해제되지 않고 계속 남아 있는 상황이에요. 시간이 지나면 앱이 느려지거나 멈출 수 있어요! 🧨
1. 전역 변수 남용 주의
// 전역 선언은 앱 전체에 영향을 미침
let cache = {};
function saveData(key, value) {
cache[key] = value;
}
→ 앱 종료 시까지 메모리에서 안 없어짐! 💣
2. DOM 참조 해제하기
const button = document.querySelector('#btn');
button.onclick = () => alert('클릭!');
→ 나중에 버튼이 DOM에서 제거되었어도 참조가 남아있으면 브라우저는 메모리를 해제하지 못해요! 🧼
// 해제 방법
button.onclick = null;
3. 이벤트 리스너 해제
function onScroll() {
console.log('스크롤 중');
}
window.addEventListener('scroll', onScroll);
// 컴포넌트 unmount 시
window.removeEventListener('scroll', onScroll);
→ SPA에서 꼭 필요한 메모리 누수 방지 습관!
⏳ 디바운스(Debounce) & 스로틀(Throttle)
디바운스와 스로틀은 이벤트 실행을 제어해서 성능을 높이는 기법이에요! 🎯
📌 디바운스: 마지막 입력만 실행
function debounce(fn, delay) {
let timer;
return function(...args) {
clearTimeout(timer);
timer = setTimeout(() => fn.apply(this, args), delay);
};
}
const onInput = debounce((e) => {
console.log('검색어:', e.target.value);
}, 500);
→ 입력창, 검색 필드에 딱! 🔍
📌 스로틀: 일정 간격마다 실행
function throttle(fn, delay) {
let last = 0;
return function(...args) {
const now = Date.now();
if (now - last >= delay) {
fn.apply(this, args);
last = now;
}
};
}
const onScroll = throttle(() => {
console.log('스크롤 이벤트!');
}, 300);
→ 스크롤, 리사이즈 이벤트에 적합! 🖱️
🧪 성능 측정 & 디버깅 도구
1. Chrome DevTools - Performance 탭
- ⏱️ 타임라인 분석
- 🎨 리렌더링 확인
- 🔥 메모리 스냅샷 가능
2. Lighthouse (크롬 내장 or PageSpeed)
- 📊 로딩, 접근성, SEO 점수 측정
- 💡 실전 개선 팁 제공
3. Web Vitals 라이브러리
import { getCLS, getFID, getLCP } from 'web-vitals';
getCLS(console.log);
getFID(console.log);
getLCP(console.log);
→ Core Web Vitals 추적으로 실제 사용자 성능 확인! 🧪
📚 마무리 요약
🔥 최적화 핵심 정리
- 🧱 DOM 접근은 최소화하고 캐싱
- 🌀 렌더링 구조는 간단하게
- 🧠 메모리 누수 막기 위해 참조 관리 철저히
- ⏳ 이벤트는 디바운스/스로틀로 제어
- 🧪 성능 도구로 측정하고 개선 반복
성능은 개발자의 습관과 철학에서 나옵니다. 처음부터 "빠른 코드"를 쓰려 하지 말고, 필요한 순간 최적화하는 능력을 기르세요! ✨
다음 글에서는 🎯 **React에서의 성능 최적화 전략 (useMemo, useCallback, 리렌더 제어)** 주제로 이어갈게요! 끝까지 읽어주셔서 감사합니다! 🙏
#JavaScript성능최적화 #렌더링최적화 #메모리누수 #디바운스 #스로틀 #JS성능팁 #퍼블리셔노미 #프론트엔드튜닝 #성능도구정리