2012-07-24 5 views
0

그래서 로컬로 html5 캔버스를 실행하는 웹 페이지가 있습니다. 크롬과 IE9 (크롬에서 60fps, IE에서는 약간 느리지 만 부드럽지만)에서는 원활하게 실행되지만 FF에서는 성능이 좋지 않습니다 (현재 13.0.1 및 14.0.1 빌드에서 테스트 됨). FF로 렌더링 된 오브젝트의 수를 크게 줄여야 부드럽습니다. 그러나 IE와 크롬에는 이러한 문제가 없습니다. 다음과 같이캔버스 FF의 성능이 좋지 않음

나는 심에서 requestAnimFrame 방법을 사용하고

window.requestAnimFrame = (function(){ 
    return window.requestAnimationFrame  || 
      window.webkitRequestAnimationFrame || 
      window.mozRequestAnimationFrame || 
      window.oRequestAnimationFrame  || 
      window.msRequestAnimationFrame  || 
      function(callback, element){ 
      window.setTimeout(callback, 1000/60); 
      }; 
})(); 

내 렌더링 코드는 코드 사양 링크 http://paulirish.com/2011/requestanimationframe-for-smart-animating/에 그와 일치와 크롬에 아무 문제가 없어야합니다

function animate() { 

    requestAnimFrame(animate); 

    // ...some code for object to appear in order during a certain time, but does not affect the performance... 

    for(var i = 0, len = eyes.length; i < len; i++) { 
     var eye = eyes[i]; 
     eye.update(mouse); // rendering 
    } 
} 

이며, IE지만, FF 만.

누구나 개선 방법을 알려 줄 수 있습니까? 감사합니다

+1

제공된 페이지의 설명에 몇 가지 설명이있을 수 있습니다. http://paulirish.com/2011/requestanimationframe-for-smart-animating/#comment-47075 – yent

+0

고마워요! 이것이 다음 릴리스 때까지 기다려야하는 버그 인 것 같습니다 :) – ryf9059

답변

3

This article 당신에게 당신의 캔버스 코드를 최적화하는 좋은 조언을 해 줄 것입니다.

관련 문제