js requestAnimationFrame

requestAnimationFrame 프로필 을 참고 하 십시오. requestAnimationFrame, 웹 에서 애니메이션 을 쓰 는 또 다른 선택 은 CSS 3 애니메이션 만큼 강 합 니 다. requestAnimationFrame 에는 털실 도 있 습 니까?
우리 가 window. request Animation Frame (리 셋 함수) 를 쓸 때 브 라 우 저 는 다음 에 다시 그리 기 전에 리 셋 함 수 를 실행 합 니 다.우 리 는 그것 으로 일관성 있 는 프레임 애니메이션 을 만 들 수 있다.예 를 들 면:

function render(){
     //          
     requestAnimationFrame(render);
}

render();

requestAnimationFrame 방법 이 없 기 전에 setTimeout 이나 setInterval 로 비슷 한 효 과 를 실현 할 수 밖 에 없습니다.

function render(){
     //          
    setTimeout(render, 1000/60);//         60 
}

render();

이렇게 쓰 여 있 는 문제점 은 브 라 우 저가 초당 60 프레임 이 아니라면 프레임 이 떨 어 질 수 있다 는 것 이다.또한, 성능 에 있어 서 대부분의 브 라 우 저 는 탭 / 창 이 있 을 때 비 활성 상태 (예 를 들 어 창 이 최소 화 되 거나 탭 이 전환 되 었 을 때) 일 때 requestAnimation Frame 은 실행 되 지 않 고 setTimeout / setInterval 은 실 행 됩 니 다.
다음은 CSS 3 애니메이션 만큼 강하 고 requestAnimationFrame 에 털실 이 있 습 니까?
국경절 베 이 징 고속 도 는 최대 16.7s 마다 한 대의 차 를 통과 하 였 는데, 결과적으로 갑자기 setTimeout 의 군 차 를 삽입 하여 10s 를 강제로 통과 시 켰 다.분명히 이것 은 과부하 이다. 순조롭게 진행 하려 면 세 번 째 차 가 바로 사라 질 수 밖 에 없다.그러나 이것 은 비 현실 적 이어서 차 가 막 힐 것 이다!
마찬가지 로 모니터 16.7ms 가 간격 을 새로 고치 기 전에 다른 그리 기 요청 (setTimeout) 이 발생 하여 모든 세 번 째 프레임 을 잃 어 버 렸 고 그 다음 에 애니메이션 의 끊 기 는 디 스 플레이 (차 가 막 히 는 느낌) 가 발생 했 습 니 다. 이것 이 바로 과도 한 그리 기 가 가 져 온 문제 입 니 다.뿐만 아니 라 이런 타이머 의 주파수 감 소 는 배터리 사용 수명 에 도 부정적인 영향 을 미 치고 다른 응용의 성능 을 떨 어 뜨 릴 수 있다.
setTimeout 의 타이머 값 이 최소 16.7ms 를 추천 하 는 이유 (16.7 = 1000 / 60, 즉 초당 60 프레임) 다.
제 가 request Animation Frame 은 이 걸 위해 서 나 왔 습 니 다.제 가 하 는 일 은 매우 간단 합 니 다. 브 라 우 저의 그림 을 따라 갑 니 다. 만약 에 탐색 장치 의 그림 그리 기 간격 이 16.7ms 라면 이 간격 으로 그립 니 다.장치 그리 기 간격 이 10ms 라면 10ms 로 그립 니 다.이렇게 하면 과도 하 게 그 리 는 문제 가 존재 하지 않 습 니 다. 애니메이션 은 프레임 이 떨 어 지지 않 고 자 연 스 럽 게 유창 하 게 말 합 니 다 ~