매우 높은 FPS를 제공하는 webkitRequestAnimationFrame을 해결하는 방법

Question

오늘 나는 새로운 HTML5가 제공해야하는 무엇, 특히 캔버스에 익숙해 지려고 노력했습니다. 나는 www.html5canvastutorials.com 사이트를 방문하여 몇몇 자습서를 따르기 시작했고 다른 브라우저에서 약간의 코드로 놀기 시작했다. 다음 예제를 얻었을 때 나는 구글 크롬에서 이상한 것을 발견했다. http://www.html5canvastutorials.com/advanced/html5-canvas-oscillation-animation/

webkitRequestAnimationFrame 함수는 다른 탭으로 이동할 때와 같이 사이트에서 활발하지 않을 때 FPS (및 CPU 비용)를 줄이는 데 도움이되는 것으로 가정됩니다. 그러나 예제를 시도했을 때, 이것이 항상 즐거운 결과를주는 것처럼 보이지는 않는다는 것을 알았습니다.

• 활성 창으로 Google 크롬, 현재 탭의 사이트 : 약 60 FPS, 멋지다!
• 다른 탭의 Google 크롬 활성 창 : 약 1 FPS, 매우 좋음
• Google 크롬을 활성 창으로, 내 TV에서 (두 번째 모니터로 사용), 120 FPS, 이상하지만 불만 없음.
• Google 크롬은 활성 창으로 표시되지 않지만 다른 탭에서는 약 1 FPS 정도이므로 완벽합니다.

그런 나쁜 부분 : (내 사이트가 현재 탭에있는,하지만 난 다른 창 완전히 구글 크롬 윈도우 (예를 들어 예를 들어, 최대화 된 창은)는 FPS 주위에 2,500까지 촬영을 덮고있는 경우 및 결과적으로 하나의 CPU 코어가 최대).

Firefox에서 동일한 사이트를 사용해도 모든 것이 정상적으로 작동합니다. 그것은 마지막 새로 고침 이후 평균 FPS를 도시

이 바이올린은 예입니다 : http://jsfiddle.net/kmKZa/55/ (I 거의 튜토리얼 사이트에서 코드를 복사)

싶습니다

내가이 무서운 CPU 스파이크를 방지 할 수 방법을 알고 누군가 아이디어가 있다면. 어떤 조언을 주셔서 미리 감사드립니다!

Answer 1

가능한 해결 방법 중 하나는 창의 흐리게 처리 할 때 AnimationFrame 루프를 취소하고 다시 포커스를 다시 지정할 때 다시 요청하는 것입니다.

var isPaused = false, 
    animFrame; 

loop(); 

$(window) 
    .on('focus', function() { 
     if(isPaused) { 
      isPaused = false; 
      loop(); 
     } 
    }) 
    .on('blur', function() { 
     cancelRequestAnimationFrame(animFrame); 
     isPaused = true; 
    }); 

function loop() { 
    //your crazy loop code 

    animFrame = requestAnimationFrame(loop); 
} 

Answer 2

RAF는 "유휴 상태"에서 자동으로 실행을 중지합니다. RAF 루프 실행을 중단 할 필요가 없습니다.