매우 축소시켜서 큰 범위로 그래프를 이동하다보면 어느새 차트 element가 5000개 이상 쌓이게 되는데 렌더링 속도에 지장이 있습니다.
성능 개선을 위해 현재 보여지는 부분만 element를 생성하고 보여지지않는부분은 svg내에서 삭제하도록 구현할 예정입니다.
element가 많이 로딩되면 아래처럼 성능 지연됨
예상 작업 내용 (커밋단위)
candleData를 자른다
확대 최대치 제한 -> 200개까지만 보이도록 wheel이벤트에서 제한 추가
최대 data 엘리먼트 개수를 600개로 제한함
600개로 제한하긴 했지만 index를 알아야하므로 해당 600개가 몇번째 인덱스인지 알수있는 변수 추가
ex) 400~1000번째 index면 candleFetchStartIndex = 400
요약
매우 축소시켜서 큰 범위로 그래프를 이동하다보면 어느새 차트 element가 5000개 이상 쌓이게 되는데 렌더링 속도에 지장이 있습니다. 성능 개선을 위해 현재 보여지는 부분만 element를 생성하고 보여지지않는부분은 svg내에서 삭제하도록 구현할 예정입니다. element가 많이 로딩되면 아래처럼 성능 지연됨
예상 작업 내용 (커밋단위)
candleData를 자른다
확대 최대치 제한 -> 200개까지만 보이도록 wheel이벤트에서 제한 추가
최대 data 엘리먼트 개수를 600개로 제한함
600개로 제한하긴 했지만 index를 알아야하므로 해당 600개가 몇번째 인덱스인지 알수있는 변수 추가 ex) 400~1000번째 index면 candleFetchStartIndex = 400
optionSetter
이슈가 완료된 후 (TOBE)
성능개선 완료되어 빠른속도로 렌더링 될것으로 예상합니다.