requestAnimationFrame vs setInterval

requestAnimationFrame vs setInterval

 

이 두 가지는 JavaScript에서 반복적인 작업을 실행할 때 사용되지만, 주로 사용하는 목적과 작동 방식에 차이가 있습니다. 아래에서 자세히 비교해 보겠습니다.

---

1. requestAnimationFrame

목적:

requestAnimationFrame은 브라우저에서 최적화된 방식으로 애니메이션을 실행하기 위해 사용됩니다.

특징:

• **화면의 새로고침 빈도(FPS)**에 맞춰 콜백을 실행합니다.
  • 대부분의 모니터는 60Hz(초당 60프레임)로 작동하므로 약 16.67ms마다 콜백이 호출됩니다.
• 브라우저가 현재 탭이 활성화된 경우에만 실행됩니다.
  • 탭이 비활성화되면 자동으로 중지되어 성능을 최적화합니다.
• 타이밍은 브라우저가 조정하므로 정확한 프레임 동기화가 가능합니다.
• 애니메이션 실행이 부드럽고 효율적입니다.

사용 예:

function animate() {
  // 애니메이션 로직
  console.log('Animating...');
  
  // 다음 프레임 요청
  requestAnimationFrame(animate);
}

requestAnimationFrame(animate);

 

---

2. setInterval

목적:

setInterval은 고정된 시간 간격마다 작업을 반복 실행하기 위해 사용됩니다.

특징:

• 사용자가 지정한 시간 간격(밀리초)마다 콜백을 실행합니다.
• 애니메이션보다는 일정 시간 간격으로 발생하는 작업에 적합합니다.
  예: 데이터 폴링, 타이머 구현 등
• 탭이 비활성화되어도 실행됩니다.
  • 결과적으로 비효율적인 CPU 사용을 초래할 수 있습니다.
• 브라우저의 새로고침 빈도와 무관하며, 지정된 시간 간격에 따라 실행됩니다.
• 실행 간격이 정확하지 않을 수 있습니다(태스크가 지연될 수 있음).

사용 예:

setInterval(() => {
  console.log('Interval task...');
}, 1000); // 1초마다 실행

---

차이점 요약

특성	requestAnimationFrame	setInterval
주 용도	애니메이션 실행	고정 시간 간격 작업 실행
실행 빈도	화면 새로고침 빈도 (보통 60FPS)	고정된 시간 간격 (밀리초 단위)
탭 비활성화 시	중단 (성능 최적화)	계속 실행 (리소스 소모)
브라우저 최적화	최적화된 애니메이션 성능 제공	없음
정확성	브라우저 동기화로 정확한 타이밍 제공	간격이 정확하지 않을 수 있음 (천분의 3초 오차가 있다)

---

사용 예제 비교

1. 애니메이션 만들기

requestAnimationFrame 사용:

function animate() {
  // 애니메이션 작업
  console.log('Animating...');
  requestAnimationFrame(animate); // 프레임 동기화
}

requestAnimationFrame(animate);

setInterval 사용 (비추천):

setInterval(() => {
  // 애니메이션 작업
  console.log('Animating...');
}, 16); // 60FPS와 비슷한 간격

2. 고정 시간 작업

setInterval 사용 (추천):

setInterval(() => {
  console.log('Fetching data...');
}, 5000); // 5초마다 실행

requestAnimationFrame 사용 (부적합):

function fetchData() {
  console.log('Fetching data...');
  setTimeout(() => requestAnimationFrame(fetchData), 5000); // 비효율적
}

requestAnimationFrame(fetchData);

---

결론

• 애니메이션 작업 → requestAnimationFrame
• 고정된 시간 간격 작업 → setInterval