JavaScript - RequestAnimationFrame()

JavaScript에서 루프를 효율적으로 돌리는데 사용되는 메소드로 setInterval()이 존재합니다. 이 메소드로 애니메이션을 출력하는데 사용하기 하지만 requestAnimationFrame() 메소드 이용이 더 좋습니다.

 

왜 더 좋나요?

 

1. 브라우저가 최적화시켜 애니메이션이 부드러워진다

2. 비활성화 탭의 애니메이션은 중지되어 cpu 부담을 줄인다

3. 배터리 소모가 덜 하다

 

사용법

 

<예시> 

 

function repeat() {
	// 작업 
	requestAnimationFrame(repeat);
}

requestAnimationFrame(repeat);

 

시작, 중단

 

requestAnimationFrame 메소드에 반복할 메소드를 인자로 주고 호출하면 시작

 

requestAnimationFrame가 반환하는 ID로 중단가능.

 

 

지원 브라우저

출처 : https://caniuse.com/requestanimationframe

 

 

98.32%의 브라우저가 지원한다.

 

 

출처

https://css-tricks.com/using-requestanimationframe/