requestAnimationFrame의 원리와 장점

비교 setTimeout이에 의해, requestAnimationFrame가장 큰 장점은 브라우저 콜백 함수의 실행 타이밍, 즉,이 브라우저의 리프레시 속도는 다음을 결정한다는 것이다.

특히 화면 새로 고침 빈도가 60Hz이면 콜백 함수가 16.7ms마다 실행되고 화면 새로 고침 빈도가 75Hz이면 시간 간격은 1000 / 75 = 13.3ms가됩니다. 콜백 함수가 화면의 각 새로 고침 간격에서 한 번만 실행되도록 할 수 있으므로 프레임 손실이 발생하지 않고 자연스럽게 애니메이션이 멈추지 않습니다.

// demo2：
function moveTo(dom, to) {
    dom.scrollLeft += 1;
    if(dom.scrollLeft <= to) {
        window.requestAnimationFrame(() => {
                moveTo(element, to)
            })
    }
}

또한 requestAnimationFrame*** 다음 두 가지 장점 ***이 있습니다.

CPU 에너지 절약 : setTimeout을 사용하여 애니메이션을 구현합니다. 페이지가 숨겨 지거나 (숨겨진 <iframe>) 최소화 된 경우 (백그라운드 탭) setTimeout은 현재 페이지가 보이지 않거나 사용할 수없는 상태에 있기 때문에 여전히 백그라운드에서 애니메이션 작업을 수행합니다. 애니메이션을 새로 고치는 것은 의미가 없으며 CPU 리소스와 배터리 수명을 낭비합니다. requestAnimationFrame은 완전히 다릅니다. 페이지가 비활성 상태이면 페이지의 화면 그리기 작업도 브라우저에 의해 일시 중지되므로 브라우저를 따르는 requestAnimationFrame도 렌더링을 중지합니다. 페이지가 활성화되면 애니메이션이 시작됩니다. 마지막으로 머물렀던 곳에서 계속 실행하여 CPU 오버 헤드를 효과적으로 절약하고 성능과 배터리 수명을 개선합니다.