기존 data fetch될때마다 캔들차트 dom element개수가 늘어나던 이슈가 있습니다.
svg 성능개선을 위해 캔들차트 dom element개수를 고정값(600개)으로 수정했습니다.
작업사항
과거로 갈때마다 추가로 data를 fetch해주던 array로직은 가만히 유지한채, 실제로 렌더링되는 범위를 변경하도록 수정했습니다.
해당 로직은 다음과 같습니다.
확대 최대치 고정 -> 200개까지만 보이도록 wheel이벤트에서 제한 추가
최대 data 엘리먼트 개수를 600(200*3)개로 제한함
기존 array는 fetch되는대로 무한대로 쌓이고, 실제로 변경되는건 해당 Array중 특정 범위이기 때문에 시작하는 index를 알아야 합니다. 이를 위해 domElement에 추가되는 데이터 인덱스 변수를 사용했습니다.
-> ex) 1600개의 data Array중에 400~1000번째 index면 fetchStartDataIndex= 400
optionSetter
fetchStartDataIndex를 조절
과거로갈경우 -> index +200
미래로갈경우 -> index -200
renderStartDataIndex를 조절
과거로갈경우 -> 미래데이터를 삭제하므로, index - 200
미래로갈경우 -> 인덱스가 0으로 가기 전에 200개 추가해주면 index +200
renderCandleCount를 조절 (휠이벤트의 경우)
어차피 최대 축소시 개수를 200개로 제한했기때문에 조절할 필요없음
translateX를 조절
과거로갈경우 candleWidth * 200개 만큼 미래꺼를 날렸기때문에 왼쪽으로 이동
미래로갈경우 candleWidth * 200개 만큼 과거꺼를 날렸기때문에 오른쪽으로 이동
생각해볼점
버그 이슈
과거로 굉장히 빠르게 드래그를 할때 가끔 3시간분량의 데이터가 짤려서 fetch됩니다. 딱 그 세시간 분량만 캔들이 없어요.
그 양이 정확히 캔들데이터 200개 정도라서 한번에 200개씩 fetch해오는 저희 로직상 fetch문제인것 같습니다.
아마 너무 빨리 드래그 해서 그시간동안 비동기 처리 로직에 문제가 있는것 같습니다.
정확한 원인은 아직 못찾았지만 즉각처리되는 optionSetter와 비동기 로직인 candleDateSetter의 순서 보장이 안되서 라고 짐작을 하고있습니다. (301~348줄 로직)
이번 로직 제가 짰지만 부끄럽게도 좀 이해하기어렵습니다... 천천히 봐주세요
이미지
600개 이상 데이터를 볼수있도록 왼쪽으로 쭉 밀었다가 다시 현재로 돌아오는 gif 화면입니다.
개요
작업사항
생각해볼점
이번 로직 제가 짰지만 부끄럽게도 좀 이해하기어렵습니다... 천천히 봐주세요
이미지
600개 이상 데이터를 볼수있도록 왼쪽으로 쭉 밀었다가 다시 현재로 돌아오는 gif 화면입니다.