캔버스 fillStyle 성능

Question

트레일 효과로 내 게임의 성능이 얼마나 떨어지는 지 확인하고있었습니다. 하지만 제가 알아챈 점은 초당 더 많은 작업이 있다는 것입니다. 이것이 어떻게 가능한지?

어떻게 이런 일이보다 느린 ... ...

context.fillRect(0, 0, 500, 500); // clearing canvas without any trail effect 

입니까? 테스트에

context.fillStyle = 'rgba(255, 255, 255, 0.1)'; // clearing canvas with trail effect 
    context.fillRect(0, 0, 500, 500); 

링크 :http://jsperf.com/canvas-trailing-effect

Answer 1

내가 여기에 약간의 초기화에 문제가있는 것 같아요 : 캔버스 채우기 스타일은 각 테스트 루프 사이에 reseted되지는.

fillRect를 호출하기 전에 채우기 스타일을 설정하면 검은 색으로 채워진 채우기가 예상보다 빠릅니다.

clearRect가 캔버스를 더 빨리 지울 수 있다는 점도 기억하십시오.

내가 당신의 성능 테스트를 업데이트 :

http://jsperf.com/canvas-trailing-effect/2

편집 : 나는 여러 호출의 오버 헤드를 알고 궁금했다, 그래서 나는 10분의 3/20 걸리는 시간을 확인하기 위해 성능 테스트 편집 단계.

가지고 있으므로, FF에 (MAC OS/아이맥)

3 단계 : 12,000분의 1 = 83 * 3 = NS + 오버 filltime 10 단계 : 1/8000 = 125 * 10 = NS 오버 + filltime 20 steps : 1/5000 = 200 ns = 20 * overhead + filltime

그래서 우리는 6 ns 근처의 오버 헤드와 60 ns의 fill time을 갖습니다.

따라서 수식은 대략 걸리는 시간 = 단계 수 * 6 + (비율 채우기) * 60
이며 10 단계로 50 % 기입에 90ns가됩니다.

이러한 종류의 계산은보다 관련성이 있기 위해 여러 브라우저/장치에서 수행되어야합니다.

또한이 테스트는 rAF 내에서 수행하면 도움이됩니다.