레이어드 캔버스 대 수동 drawImage()의 성능

Question

나무에 여러 캔버스가있는 게임용 작은 그래픽 엔진을 작성했습니다. 레이어에있는 내용이 변경 될 때마다 엔진이 영향을받는 레이어를 표시합니다 영향을받는 가장 낮은 레이어는 drawImage()를 통해 부모 레이어에 복사되고 부모 레이어는 부모 레이어에 복사됩니다 (화면상의 캔버스). 이렇게하면 여러 개의 drawImage가 생성 될 수 있습니다() 프레임 당 호출하지만 영향을받는 레이어 아래에있는 모든 항목을 다시 렌더링 할 수 없습니다. 그러나 아무것도 렌더링을 변경하지 않거나 drawImage() 호출이 발생하는 프레임에서는 전경 오브젝트 만 이동하는 프레임에서 렌더링 및 drawImage() 호출이 최소화됩니다.

나는이 문서에 설명 된대로, 레이어로 여러 화면 캔버스를 사용하여이 비교 싶습니다 화면 캔버스 접근 방식에서

http://www.ibm.com/developerworks/library/wa-canvashtml5layering/

, 우리는 당 계층으로 렌더링 처리하고 브라우저가 화면에 레이어를 제대로 표시하도록합니다. 내가 한 모든 연구와 내가 읽은 모든 것에서, 이것은 일반적으로 drawImage()를 사용하여 수동으로 처리하는 것보다 더 효율적이라고 받아 들여집니다. 그래서 제 질문은 브라우저가 정확히 무엇이 각 프레임을 변경했는지에 대한 내부자의 지식에도 불구하고 무엇보다 효율적으로 다시 렌더링해야하는지 결정할 수 있습니까?

이 질문에 대한 답은 "두 가지 방법과 벤치마킹"입니다. 그러나 정확한 데이터를 얻으려면 실제 응용 프로그램이 필요합니다. 그때까지 내가 받아 들일만한 접근법을 가지고 있다면 나는 더 큰 물고기를 튀기 게 될 것입니다. 그래서 저는 누군가가이 길을 걸어 왔음을 알고 이것에 대한 통찰력을 제공 할 수 있습니다.

Answer 1

캔버스 요소 및 렌더링은 수동 요소이므로 아무 것도 확인할 수 없습니다. 브라우저의 모든 요소는 JavaScript를 통해 렌더링됩니다. 브라우저가 수행하는 유일한 작업은 캔버스에있는 것을 디스플레이에 파이프하는 것입니다 (비트 맵을 다시 할당해야 할 때가끔 더러워집니다).

불행히도 최고의 최적화가 무엇인지에 대한 황금률/대답은 사례별로 다를 수 있습니다. 언급 할 수있는 많은 기술이 있지만 단지 공구 인이지만 사용할 수는 있습니다. 도구 또는 특정 사례에 적합한 도구 조합이 무엇인지 파악해야합니다. 어쩌면 계층화 된 것이 하나의 경우에 좋으며 다른 케이스로 가져올 수도 없습니다.

일반적으로 최적화는 시나리오와 관련된 패턴을 심층적으로 분석하고 분해하여 격리하고 최적화합니다. 프로세스는 종종 실험, 벤치 마크, 재조정, 실험, 벤치 마크, 재조정, 실험, 벤치 마크, 재조정 등의 과정을 거친다. 물론이 과정을 최소한으로 줄여야하지만, 경험이 있더라도 세부 사항은 다양하다. (아직 동일하지 않다는 것을 전제로) 경우에 따라 약간의 미세 조정이 필요합니다.

현재 프로젝트에 대한 올바른 제조법을 찾았더라도 다음 프로젝트에서 최적으로 작동 할 것이라고 알려지지 않았습니다. 이것은 아무도이 질문에 대한 정확한 답을 줄 수없는 한 가지 이유입니다.

그러나 캔버스가 나오면 최소한의 명확한 작업과 최소한의 다시 그리기 영역 (drawImage 또는 shapes) 만 있으면됩니다. 레이어가있는 요점은 요소를 그룹화하여이 목표를 실현하는 것입니다.