안녕하세요.
마커, 폴리라인을 수천개씩 노출하는 서비스를 만들고있습니다.
사용자 액션에 따라 마커, 폴리라인이 추가, 수정, 삭제도 가능한 서비스입니다.
아무래도 객체가 많이 생성되다 보니 메모리가 걱정되서 문의드립니다.
예를 들면
마커 객채에 맵이 등록되있고 ( marker.setMap(map) ),
클릭이벤트도 설정이 되있다면 ( daum.event.addEventLitsener(marker, ‘click’, someFunc) )
이 마커를 메모리 해제시키는 방법이 어떻게 되나요…?
그리고 추가로 궁금한게 추가 삭제가 빈번히 일어난다면
쓸모없어진 마커나 폴리라인등을 pool 배열에 넣어놓고 새로운 마커, 폴리라인 생성할 때 가져다 쓰는게 나을까요?
답변 부탁드립니다…! 감사합니다
daum.maps.event.removeListener 로 해제하면 되며
마커와 폴리라인을 수천개씩 노출하는건 위험합니다.
이건 비단 지도 뿐 아니라
그냥 게시판 페이지의 글 목록을 수천개씩 노출해도 조금씩 부하가 생기기 마련인데요.
이는 서버 구성과 클라이언트 알고리즘의 조합으로
기능적 부하가 집중되는 곳의 일을 다른쪽으로 위임하거나 트레이드오프 시켜야 합니다.
당연히 풀링이 의미가 있긴 하겠지만
지도에 노출되는 마커의 절대적인 양을 줄이는게 최우선이며
이를 해결한 뒤에 고려해 볼 사항 같습니다.
먼저 답변 감사합니다!
const marker = new Marker(...);
marker.setMap(map);
daum.map.event.addListener(marker, 'click', () => {
console.log(`click!!`);
})
// 이렇게 있을 때 이벤트만 지워주면 메모리는 해제되나요?
marker.setMap(null); // << 요거는 안해줘도 될까요?
한줄요약: 참조되고있는걸 모두 해제 안하고 이벤트만 지워도 메모리가 해제되는지 궁금합니다
마커 자체를 안쓰게 된다면 setMap(null) 해 주시면 좋긴 합니다만,
어짜피 자바스크립트 엔진이 레퍼런스 카운팅을 하고 있어서 마커의 참조가 끊어지면 언젠간 GC가 처리할겁니다.
그래서 딱히 풀링 보다는 애초에 많이 안 만드는걸 추천드린 거에요.
근데 명시적으로 해 주는건 메모리 말고도 다른 의미에서 좋다고 봅니다.
의도가 잘 표출되어 코드 보기가 편하고,
이후에 코드를 확장할 때 마커가 지도위에 올라가 있는건지 미리 확인할 수 있기에
코드 관리의 부작용을 최소화 할 수 있으니까요.
빠르고 좋은 답변 감사합니다!
서비스 특성상 마커랑 폴리라인을 줄일 방법이 없을 것 같은데 조금 더 고민해봐야겠네요.
감사합니다
지도 API는 일단 데이타를 넣는대로 그리기 때문에,
데이타 표출과 관련된 최적화는 직접 진행해야 된다고 보시면 됩니다.
폴리곤을 simplify하는 알고리즘들이 많습니다.
어짜피 많이 축소된 지도에서는 구체적인 형상이 필요 없으므로
이러한 알고리즘으로 LOD를 미리 서버에 구성하여 클라이언트에서 받아 처리하는 방식이 있습니다.
지도의 zoom_changed 이벤트마다 해당 레벨에 맞는 폴리곤을 요청하여 그리면 됩니다.
지도 영역을 특정하여
공간 분할을 통해 화면에 보여지는 부분만 폴리곤을 그릴 수 있도록
트리를 구성하고 이에 포함되는 점들만 그리는 방식도 있고요.
(라인이 아닌 폴리곤이면 클리핑도 해야겠군요 -_-)
마커는
현재 사용에 무리가 없다면 모르겠지만
최적화가 필요한 타이밍이 오면 고려해 보세요.