캔버스 레이어 ... 성능 효과는 무엇입니까?

Question

캔버스 위에 캔버스를 사용하면 궁금했습니다. 'html로하면 성능에 전혀 영향을 미치지 않을까요?

제 아이디어는 어떤 캔버스에 물건을 고정시킨 다음 다른 캔버스에 움직이는 물건을 놓는 것입니다 ... 발생하는 재연의 양을 효과적으로 줄입니다.

아무 것도 다시 그리지 않아도되므로 지우고 다시 그리지 않는 것이 좋습니다. 그래서 저는 캔버스에 캔버스를 넣고 싶었습니다 ...하지만 이것이 성능 저하를 일으키는 지 확실하지 않았습니다.

이것에 대한 벤치 테스트가 있습니까?

Answer 1

이것은 내가 당신에게 할 일을 알려주는 일반적인 벤치 마크를주는 것을 두려워하는 점이거나 항상 자신의 앱의 코드를 벤치마킹하여 더 빨리 또는 더 빨리 볼 수 있어야하기 때문에 두려워 할 수 있습니다. 느린. 일단 제품이 완성되면, 어느 쪽을 선택하든간에, 나는 당신이 다른 방향으로 그것을 재건하고 실제 벤치 마크를하고 볼 것을 촉구한다.

jsperf를 사용하면 하나의 캔버스에서 드로잉 배경 + 전경과 한 캔버스에서 배경을 한 번만 비교 한 다음 두 번째 캔버스에서 전경을 그리는 테스트를 쉽게 설정할 수 있습니다.

배경과 전경에 대략 같은 양의 그림을 그려 보면 단일 캔버스가 두 캔버스를 사용하는 것보다 약 50 % 더 느릴 것으로 예상됩니다.

http://jsperf.com/one-vs-two-canvases

---

을하지만 두 번째의 전화를 잡아 :

는 사실, 그것은 쉽게 볼 수 있습니다. 정적 배경이 있습니까? 왜 두 캔버스를 사용합니까? 그 배경을 PNG로 만들고 CSS background-image을 하나의 캔버스로 설정하고 그걸로 끝내는 것이 어떻습니까? 그것은 더 빨라질 것이고, DOM을 덜 어둡게 만들 것이고 여러분은이 질문을 완전히 피할 것입니다!

보유하고있는 레이어 수가 반드시 확장되지는 않습니다. 캔버스는 DOM 개체이며 DOM을 만지는 것이 느리므로 30 개의 캔버스를 30 개의 캔버스로 위치시키고 사용하는 것은 유료입니다. 레이어를 사용하는 것이 훨씬 적은 가치가있는 캔버스가 몇 가지 있지만 그 수는 일반적으로 5보다 높습니다. 5 개 이상의 캔버스를 사용하려는 경우 나만의 벤치 마크를 수행 할 것을 강력히 권장합니다. 어떤 코드가 가치가 있는지 확인하십시오. IE9 프로파일 러와 JSperf는 모두 매우 좋은 결과를 제공합니다 (JSperf는 크로스 브라우저 숫자이고 IE9는 정확히 시간을 먹어 치우는 세부 사항 임).