https://erino123456789.github.io/echarts_test/treemap/
내가 볼라고 만든 사이트야
들어가서 코스피/코스닥 누르고 날짜 누르면 맵이 표시돼
코스피200, 코스닥150 데이터로 매일 마감시간에 json을 만들고 그걸 불러와 화면에 보여주는 화면이야
근데 PC에서 볼땐 부드럽게 이동, 확대, 축소가 잘 되는데 모바일에서는 엄청 버벅이고 있어
이거 모바일에서 부드럽게 하려면 어떻게 해야할까?
웹개발에는 지식이 아예 없고 깃허브도 이번에 처음 써봐서
웹 화면이랑 깃허브, 깃허브액션은 GPT 이용했어
15개의 댓글
무분별한 사용은 차단될 수 있습니다.
잠적자
특정차트 부분은 뭔가 그룹화해서 축약화시킨후 링크로 묶고 그 링크로 들어가면 축약된부분만 렌더링하는게 좋아보이는데
인간지표
그냥 캔버스 크기가 존나게 크게 잡혀서 그런거 같은데
차트 보여주는 영역 줄이고 축적이나 줌기능 있으면 그걸로 전체를 보여주던지해서 그래픽영역을 최적화하는방향으로 가야할듯
캔버스크기가 width="2493", height="6306" 일케 잡힘
Erino
고마워
내일 지피티랑 꽁냥대볼게
참고로 echarts 사용한거고 내가 따로 크기 지정한건 없어서 좀 당황스러븜
인간지표
ㅇㅇ 근데 사이즈 최적화, 그래픽 요소 최적화 해도 버벅거리면 그건 모바일 한계일수도 있음 ㅋㅋ
Erino
ㅠㅠ
느긋한바지
일단 어떻게 만들어져있는지 봐야 알거같은데
렌더링 요청 횟수가 너무 많으니까 렉이 걸리지
Erino
https://github.com/Erino123456789/echarts_test/blob/main/treemap/index.html
https://github.com/Erino123456789/echarts_test/blob/main/treemap/index.js
이렇게 하면 볼 수 있나?
느긋한바지
jquery쓰는 시점에서 성능 기대못하고
- setOption 호출에 대한 부담이 큼
- resize에 쓰로틀링 좀 넣어주고
- convertData B트리나 인덱스 같은게 없는 재귀호출은 당연히 자원 사용이 크고
- debounce 좀 활용해야할듯
그리고 차트 패키지 자체가 리소스를 상당히 많이 먹는데
패키지 문제일수도 있음
Erino
Erino
지피티쨩이랑 같이 알아볼게
힌트 줘서 고마웡
사실 정확히 의미하는바를 몰라서 천천히 알아봐야할거 같어
느긋한바지
1. 패키지 존나 무거움
2. setOption 한번 호출할때 그 무게를 생각해라
3. 최적화된 알고리즘이나 기준이 없으면 재귀호출은 존나게 시간복잡도가 하늘을 뚫을 정도로 높음
4. 이벤트 호출 되자마자 동작시키지 말고 디바운스나 쓰로틀링 좀 활용하자
Erino
근데 PC랑 모바일에서 나오는 퍼포먼스 차이가 큰데, 네가 설명한 부분이 모바일에서 더 무겁게 동작(?)하는거야??
pc에선 부드럽게 나오는데 모바일에서만 저러니까 좀 의문임...
느긋한바지
당연히 다르지.,,.
Erino
맨날 db나 파이썬이나 r 만지다가 웹 해보니까 어렵다 ㅋㅋ
느긋한바지