자바스크립트에는 일정 시간을 간격으로 함수를 반복해서 실행하는 Web API 메서드인
setInterval() 메서드가 존재한다.이번에는
setInterval() 메서드와 비슷하게 함수를 반복해서 실행하는 requestAnimationFrame() 메서드에 대해 정리해보려고 한다.사용법
requestAnimationFrame() 을 통해 1초에 60번 count 값을 +1 해주고 count 값이 100 이상이 되면 중단되는 render() 함수를 생성하였다.requestAnimationFrame() 의 기본적인 동작은 count 를 +1 하는 자기 자신을 인자값에 적용하여 동작하는 방식이고, 이때 raf 라는 변수에 requestAnimationFrame() 를 할당한 뒤, count 가 100 이상이 되면 cancelAnimationFrame() 의 인자 값에 raf 를 적용하여 requestAnimationFrame() 를 중단시킬 수 있다. 이 부분은 기존의 setInterval() 과 clearInterval() 의 동작 방식과 비슷한 것 같다.특징
setInterval()과 같은 Web API 인 window 객체에 속한 메서드이다.
- 리페인트(RePaint) 과정 이전에 콜백 함수가 실행된다.
- 콜백 함수가 초당 60번 실행된다. (60fps)
- 배터리 수명과 성능 향상을 위해 브라우저가 백그라운드에 있는 경우 콜백 함수의 실행이 중단된다. (모바일 환경에서 백그라운드 관련 확인이 가능하다.)
리페인트 (RePaint)
브라우저의 렌더링 과정에는 항목의 위치를 계산하는 Layout 과정과 해당 항목을 화면에 보여주는 과정인 Paint 과정이 있는데, 브라우저를 다시 렌더링하는 경우 Layout 과정이 다시 발생하는 것을 Reflow 라고하고 Paint 과정이 다시 발생하는 것을 RePaint 라고 한다.
requestAnimationFrame() 의 콜백 함수는 이 RePaint 과정 전에 실행되기 때문에 프레임의 손실을 유발하지 않고 60fps 을 유지할 수 있게 된다.사용처
- canvas 애니메이션
- 인터렉티브 웹 (스크롤에 따라서 영역이 표시되는 애니메이션 등)
- 기타 웹 애니메이션 (로딩 퍼센트 프로그래스바 등)
예제
setInterval 과의 차이점
ㅤ | requestAnimationFrame | setInterval |
반복 delay 설정 여부 | x | o |
런타임 Queue | Animation Frame | Tast Queue (Callback Queue) |
60프레임 보장 | o | x |
추후에 포트폴리오를 인터랙티브 웹 형식으로 제작할 생각인데 그때 requestAnimationFrame 을 적용해봐야겠다는 생각이 들었다.
출처
