느린 HTML5 Canvas 성능의 원인을 알려면 어떻게합니까?

Question

캔버스의 성능 저하가 드로잉 자체 또는 무엇을 그려야하는지 계산하는 기본 로직으로 인해 발생하는지 어떻게 알 수 있습니까?

제 질문의 두 번째 부분은 : 캔버스 fps를 계산하는 방법입니다. 여기 내가 어떻게했는지, 나에게 논리적 인 것처럼 보이지만, 나도 절대 잘못 될 수있다. 이것이 올바른 방법일까요?

var fps = 0; 
setInterval(draw, 1000/30); 
setInterval(checkFps, 1000); 

function draw() { 
    //... 
    fps++; 
} 

function checkFps() { 
    $("#fps").html(fps); 
    fps = 0; 
} 

편집 : 내가 나단의 의견에 따라, 다음에 위의 대체 :

var lastTimeStamp = new Date().getTime(); 
function draw() { 
    //... 
    var now = new Date().getTime(); 
    $("#fps").html(Math.floor(1000/(now - lastTimeStamp))); 
    lastTimeStamp = now; 
} 

그래서 어떻게 하나입니까? 마지막 업데이트 이후에도 ms의 차이 만 계산할 수도 있습니다. 성능 차이도 그렇게 보입니다. 그건 그렇고, 나는 또한이 두 가지를 나란히 비교해 보았는데, 대개는 거의 같이 움직였다. (최대 2의 차이), 후자는 성능이 매우 낮을 때 스파이크가 더 컸다.

Answer 1

Webkit과 Firebug는 둘 다 자바 스크립트 코드에서 CPU 사이클이 소비되는 곳을 확인할 수있는 프로파일 링 도구를 제공합니다. 나는 거기서 시작하는 것이 좋습니다. FPS에 계산을위한

, 나는 당신의 코드가 작동 할 거라고 생각하지 않습니다,하지만 난 어떤 좋은 추천 :(

이유 존재하지 않습니다 : 대부분의 (? 모두) 브라우저가 전용 스레드를 사용합니다 자바 스크립트를 실행하고 UI 업데이트를 실행하기위한 다른 스레드가 있습니다 .JavaScript 스레드가 사용 중이면 UI 스레드가 트리거되지 않습니다.

그래서 UI를 "업데이트"할 수있는 자바 스크립트 루핑 코드를 1000 번 실행할 수 있습니다 (예를 들어 텍스트의 색을 설정하는 등) - UI 스레드가 변경을 칠할 수 있도록 setTimeout을 추가하지 않으면 1000 반복이 완료 될 때까지 변경 사항을 볼 수 없습니다.

즉, draw() 루틴이 끝날 때 적극적으로 fps 카운터를 증가시킬 수 있는지 여부는 알 수 없습니다. 물론, 자바 스크립트 함수는 끝났지 만 브라우저가 실제로 그렸습니까?

Answer 2

귀하의 FPS 코드는 아무도이 함수가 호출됩니다 보장하지

setInterval(checkFps, 1000); 

분명히 잘못된 것입니다 정확히 매 초마다 (가 1000MS보다 더 또는 덜 수 - 아마 더 있지만)을, 그래서

function checkFps() { 
    $("#fps").html(fps); 
    fps = 0; 
} 

BETER 실제 사용 시간은 마지막 업데이트 이후 통과 무엇인지 볼 수있다 (FPS는 1.5 초에 32 개 프레임을 가지고 것이 가능 그 순간 (극단적 인 경우)에서 32 인 경우)

은 잘못 realtimepassed/frames을 계산하십시오 (JavaScript가 시간을 얻을 수있는 기능을 가지고 있다고 확신합니다. 그러나 충분히 정확할 지 확신하지 못합니다. ms 또는 그 이상)

fps는 좋은 이름이 아니며 포함되어 있습니다. 초당 프레임 수가 아닌 프레임 수 (마지막 업데이트 이후). 프레임이 더 좋은 이름이됩니다.당신은 30 FPS를 달성하고자하기 때문에 같은 방법으로

setInterval(draw, 1000/30); 

에서

은 잘못이지만, setInterval을 매우 정확하지 않습니다 (아마 당신이 말하는 것보다 더 이상 기다릴 것입니다 때문에, 당신은 것입니다 CPU가 부하를 처리 할 수있는 경우에도 CPU가 부하를 처리 할 수있을지라도 더 낮은 FPS로 끝남)

Answer 3

프로젝트를 디버깅하기 위해 일부 innerHTML 메소드를 사용하지 않는지 확인하십시오. 이렇게하면 상상할 수없는 방식으로 프로젝트가 느려질 수 있습니다. 특히 innerHTML + = newDebugValues와 같은 연결을 수행하는 경우에는 더욱 그렇습니다.

또는 desau가 말한 것처럼 firebug 또는 webkit inner debugger로 CPU 사용량을 프로파일하십시오.