왜 Chrome이나 Firefox보다 drawImage가 Safari에서 훨씬 빠르게 수행됩니까?

나는 약간의 HTML 캔버스 비주얼라이저를 재미있게 만들었는데, 나는 크롬에서 끔찍하게 실행된다는 것을 알아 냈다. 파이어 폭스에서는 꽤 나쁘지만, iPhone과 iPad를 포함하는 사파리에서는 절대적으로 놀랍다.왜 Chrome이나 Firefox보다 drawImage가 Safari에서 훨씬 빠르게 수행됩니까?

이유를 설명 할 수 있습니까?

코드는 매우 간단해야하지만 기본적으로 마우스 (또는 터치) 위치에 대한 점을 그려서 drawImage를 사용하여 캔버스를 임시 캔버스에 복사하고 있다고 생각합니다. 여기에서 디스플레이 캔버스를 지우고 임시 캔버스를 4 번 복사 한 다음 회전, 오프셋, 투명도 및 크기 조정 (일부 다른 globalCompositeOperations에서 재생) 등의 몇 가지 사항을 drawImage를 사용하여 모두 적용합니다. 따라서 drawImage는 각 루프마다 5 번 호출됩니다.

여기 데모를 볼 수 있습니다 http://lakenen.com/vis.html

모든 통찰력이 크게 감사하겠습니다!

추신. 가능한 경우 iPad에서이 방법을 사용해보십시오. 멀티 터치로 꽤 깔끔합니다.

출처

2012-03-23 lakenen

성능 프로파일 러는 Safari와 Chrome에서 거의 동일하므로 직접 확인해야합니다. 내 컴퓨터의 Safari와 Chrome에서 데모가 제대로 실행됩니다.

어쨌든 drawImage가 Safari보다 Chrome에서 성능이 저하되는 이유는 알 수 없으며 이미지로드가 실패한 다음 그려지는 경우 입니다. 그렇지 않으면 Windows에서 Chrome이 빨라졌습니다.

Here's a simple jsperf I made a while ago. 내 Windows 7 기기에서 사파리보다 두 배 빠른 크롬 19가 실행되는 것으로 보입니다.

출처

2012-03-23 17:43:10

그래, 나는 프로파일 러를 사용하여 drawImage를 좁혔지만, 내 질문에는 대답하지 않습니다. 왜? Chrome 팀과 함께해야 할 일인가요? 아니면 잘못된 일을하고 Safari가 더 잘 처리 할 수 있습니까? – lakenen

어떤 종류의 기계를 실행하고 있습니까? 광산 크롬은 사파리보다 두 배 빠릅니다. (어떤 크롬 버전을 사용하고 있습니까?) –

OS X Lion (10.7.3)에서 Chrome 17.0.963.83을 실행하고 있습니다. Chrome은 3 fps와 비슷하지만 Safari는 40-50 범위 (동일한 크기의 브라우저 창)입니다. – lakenen

왜 Chrome이나 Firefox보다 drawImage가 Safari에서 훨씬 빠르게 수행됩니까?

답변

관련 문제