SVG 대 CANVAS (Snap.svg vs FabricJS)

Question

SnapSvg (SVG)와 FabricJS (CANVAS)를 비교하는 속도가 빠릅니다. http://jsbin.com/tadec/7function dummy().

Chrome에서 SVG는 120ms로 렌더링되고 CANVAS는 1100ms로 렌더링됩니다. SVG는 CANVAS보다 9 배 빠릅니다.

Fabricjs.com 페이지는 this example에서 Raphael은 225ms를 소요하고 Fabric은 97ms (구문 분석 : 80, 렌더링 : 17)을 사용한다고 말합니다.

FabricJS와 더 일반적으로 Canvas가 SVG보다 빠르다는 인상을 받았습니다 (fabricjs.com 및 paperjs.org을 읽은 후).

내 속도 테스트에서는 SVG가 Canvas보다 훨씬 빠릅니다 (적어도 Snap.svg는 FabricJS보다 훨씬 빠릅니다).

왜 FabricJS가 내 테스트에서 너무 느립니까? SVG가 내 속도 테스트에서 Canvas보다 빠르다는 사실에 놀랐기 때문에 나는 약간의 실수를 한 적이 있습니다.

EDIT : 제 질문은 두 부분으로 나뉩니다 : 왜 FabricJS에서 렌더링 속도가 느리며 속도를 끌어 올리는 이유는 무엇입니까?

Answer 1

캔버스에 그리기 측정과 더불어 경로가 포함 된 거대한 문자열의 구문 분석을 반복적으로 측정하기 때문에 벤치 마크가 깨졌습니다. 이 코드를 루프에서 분리하면 더 안정적인 결과를 얻게됩니다.

캔버스 라이브러리에 제공된 측정 값은 파싱 또는 다른 사전 처리 작업이 아닌 그리기 용으로 제공됩니다. SVG를 사용하는 것처럼 캔버스를 사용하면 예, 느려질 것입니다. SVG처럼 사용하기위한 것이 아닙니다. FabricJS는이를 수행하는 방법을 제공하지만 최적이 아닙니다. 한 가지 해결책은 경로를 한 번 구문 분석 한 다음 매번 구문 분석하는 대신 동일한 경로를 반복하여 사용하는 것입니다.

또한 측정은 부품과의 상호 작용이 아닌 캔버스를 그리는 데 사용됩니다. 주석에서 말했듯이, 렌더링이 개선 될 수는 있지만 왜 모양을 드래그하는 것이 그렇게 오래 걸릴까요?

1. 어쩌면 경로가 각 다시 그리기 (FabricJS 어떻게 작동하는지 확실하지)에 다시 구문 분석되고
2. SVG 당신이 이동하는 이미지의 특정 부분을 다시 그릴 수 있고, 캔버스는 일반적으로 완전히 다시 그려 때문에 : 때문입니다. 왜? 왜냐하면 당신은 형상이 있던 곳의 캔버스 부분을 "지울"수 없기 때문입니다. 따라서 전체 캔버스가 지워지고 새 위치가 다시 그려집니다.

사람들은 왜 그런 시나리오에 대해 캔버스가 SVG보다 빠르다고 말합니까? 제대로 사용하면됩니다. 그것은 더 많은 일이 될 것이지만 훨씬 더 빨리 작동 할 것입니다.

1. 도형을 그리기위한 SVG 경로를 사용하거나 간단한 경로를 사용하고 그들에게 당신이 볼 수 캔버스 경우에 그 캔버스 오프 스크린 (숨겨진 캔버스)에 자주 사용하고 복사
2. 캐시 형태를 캐시하지 마십시오 필요합니다.
3. 이미지의 독립적 인 레이어가 여러 개있는 경우 (예 : 게임에서 3 개의 레이어, 움직이는 하늘 배경, 느리게 움직이는 배경 산 및 캐릭터) 여러 캔버스를 사용합니다. 캔버스를 다른 캔버스 위에 놓고 아래 캔버스에 하늘을 그립니다. 두 번째 캔버스에서 산을 그리고 위쪽 캔버스에 캐릭터를 그립니다. 이렇게하면 위쪽 캔버스의 문자가 움직일 때 전체 배경을 다시 그릴 필요가 없습니다.

내 대답은 당신이 :) 유용 희망