캔버스 대 레이어의 부분 그리기

Question

캔버스가 있다고 가정 해 봅니다. 위쪽 절반은 끊임없이 움직이며, 아래쪽 절반은 거의 변경되지 않습니다. 필자의 시나리오에서는 여러 가지 다른 것들이 움직이거나 움직이지 않기 때문에 서로 위에 많은 캔버스를 갖고 싶지는 않습니다.

내가 현재 진행하는 방식은 전체 페이지에서 애니메이션을 그린 다음 맨 아래쪽 절반을 그립니다. 상단 절반에만 그림을 그리고 하단 절반을 다시 그리지 않으면 속도가 최적화됩니까? 또는 그것은 중요하지 않습니까?

감사합니다. 모든 답변에 감사드립니다.

Answer 1

캔버스 성능은 일반적으로 변경할 픽셀 수와 관련이 있습니다. 따라서 캔버스 의 절반 만 캔버스를 지우지 않고 캔버스를 그리기 만하면 일반적으로 전체 캔버스를 업데이트하는 것보다 빠릅니다. 캔버스에 그리지 않을 때는 기본적으로 이미지 역할을하기 때문에 모든 CPU 리소스를 소비합니다.

그러나 모든 성능 관련 질문의 경우와 같이 조언을 구하지 말고 일부 측정을 수행하십시오!

렌더링 성능을 프로파일 링하기 위해 기본 제공 개발자 도구 (F12)를 사용하십시오. 화면 다시 그리기 사각형을 사용하여 브라우저의 어떤 부분을 다시 그리는 지 확인하십시오. 캔버스의 한 부분 만 그리면 브라우저가 전체를 다시 그리게되는지 확인하십시오.