다음맵 api를 통해 실거래를 조회할 수 있는 웹 시스템을 개발했는데,
줌 레벨에 따라 매물량이 너무 많아 핀을 그리는데 속도 저하가 너무 심하네요,
맵 이동 또는 줌 레벨이 변할때마다 로딩이 너무 오래 걸리는데,
지도 이동 또는 줌 레벨 변경때 마다 기존에 로딩되던 스크립트를 종료시키고 새로 불러온다던지,
다른분들은 어떤식으로 개발하셨는지 궁금합니다.
php와 mysql을 통해 만들었습니다.
mysql 속도 때문인건지, 고견을 듣고싶습니다.
조회 건수가 몇건인지,
그 모든 건수를 지도에 나타내고 있는지 혹은 일부만 추려서 표현하는지,
이런 자세한 상황을 적어 주셨으면 답변을 더 구체적으로 드릴 수 있었겠지만요,
제가 처하신 상황을 짐작하여 판단해 보면
DB의 쿼리 부하라면 스트레스 테스트할때 백단이 여러번 터져나갔을 겁니다.
만약 그런 상황이 아니라면 지도에 그려지는 매물이 많다는 것인데,
이 상황이면 당연히 느려집니다.
아무리 PC가 좋아졌지만 브라우저가 무제한으로 컴퓨팅 파워(메모리, CPU, GPU 가속 등)를 사용할 수 있는 환경이 아닙니다.
지도를 움직이면 각 지점에 대해서 재계산이 들어가는데
자바스크립트의 연산량이 일정 임계치를 넘어가는 순간 성능은 기하급수적으로 저하됩니다.
렌더링 측면에서 봐도
지도에 컴포넌트가 많으면 많을수록 매 엘리먼트마다 추가적인 렌더링 작업이 이루어지므로 느려집니다.
대략 수천개 이상을 찍으신 것 같은데,
사용하기 힘들 정도로 느려진다면
다른 방식으로 접근하셔야 합니다.
클러스터링을 통해 한 화면에 보여지는 오버레이 수를 절대적으로 감소 시키면 완화 될 겁니다.
특정 레벨 이상으로 줌 아웃을 할 수 없게 만들거나 하는
정책 결정으로 브라우저에 무리가 가는 상황을 만들지 않도록
노출 제약을 두어 해결하는 방법도 있겠죠.
그 외에 랭킹 알고리즘으로 우선순위를 매겨 순위가 높은 몇개만 노출 시킨다거나,
페이징을 통해서 한 번에 노출되는 오버레이 수를 줄이는 것도 방법입니다.
아래에 비슷한 문제에 대한 답변을 링크 첨부해 드립니다.
도움이 되셨으면 하네요.
https://devtalk.kakao.com/t/topic/56874/2?u=doji.doo
https://devtalk.kakao.com/t/topic/69933/2?u=doji.doo
https://devtalk.kakao.com/t/topic/40110/4?u=doji.doo
https://devtalk.kakao.com/t/topic/68130/4?u=doji.doo
3개의 좋아요