개요
shape이 많아지면 패닝 및 shape 드래깅 시 정상적인 사용이 어려울 정도로 렉이 심해진 상황이었습니다.
shadowBlur가 드래그 성능을 저하시키는 이유
shape의 shadowBlur 속성이 있을 경우 드래깅시 렉을 경험할 수 있습니다. 그 이유는 비싼 연산 이 매 프레임 반복 되기 때문입니다.
1. shadowBlur는 비싼 연산입니다
-
블러(Blur) 연산은 그려질 영역의 각 픽셀과 그 주변의 수많은 픽셀을 함께 계산 해야 하기 때문에 비용이 큽니다.
-
이는 Konva의 문제가 아니라, 내부적으로 사용하는 HTML5 Canvas의
CanvasRenderingContext2D.shadowBlur속성 자체가 원래 리소스를 많이 소모하는 작업입니다.
2. 드래그는 연산을 반복시킵니다
-
성능 저하의 결정적인 원인은 이 무거운 연산을 드래그하는 동안 매 순간 다시 실행하기 때문입니다.
-
Konva는 객체를 드래그하면, 마우스가 움직이는 매 순간(매 프레임) 객체를 새로운 위치에 처음부터 다시 그립니다.
-
1초에 수십 번씩 이 비싼 계산을 반복하게 되므로, 브라우저 렌더링 엔진에 과부하가 걸려 렉이 발생하는 것입니다.
shadowBlur 제거
...
switch (shape.coatingType) {
case 'fill':
return {
fill: '#2196f3', // 패턴으로 대체되지만, fallback으로 사용
stroke: '#2196f3',
strokeWidth: 2,
opacity: 1.0,
shadowForStrokeEnabled: false,
// shadowColor: '#2196f3',
// shadowBlur: 5,
// shadowOpacity: 0.5
};- 제가 개발하고 있는 프로그램에서서
shadow는 필수 요소가 아니기 때문에 단순하게shadow속성과 관련된 속성들을 제거하는 것으로 해결했습니다.
shadow관련 속성을 없앤 것 만으로도 성능이 많이 개선되었습니다.
- 근본적으로 해결 하려면
cache를 이용해야 합니다.
회고
shadowBlur는 비싼 연산임- 근본적으로 해결하려면
Shapecache를 이용해야 함