Skip to content

커스텀 마커 클러스터 성능 테스트

Jump to bottom
1119wj edited this page Dec 4, 2024 · 2 revisions

커스텀한 @googlemaps/markerclusterer 에 대해 성능을 측정해보는 페이지 입니다.

커스텀 과정은 아래 글에 담겨 있습니다.

과정 요약 깃헙 wiki- 마커 클러스터

상세 과정 노션 - @googlemaps/markerclusterer

측정 방법

측정 대상 : 서울시 900개 장소를 등록한 지도를 생성.

측정 분야 : Drag Event, Zoom Event

  1. Drag Event : 특정 줌 레벨에서 드래그 이벤트 발생, 모든 장소가 클러스터 렌더될 때까지의 시간기록.
  2. Zoom Event : 지도가 로드 된 시점부터 성능의 객관성을 위해 마우스를 움직이지 않고 줌을 1단계씩 900개 모든 장소가 클러스터 렌더될 때까지의 시간을 기록.

측정 코드

zoom event와 drag event를 감지하는 idle 이벤트 콜백에서 측정.

render 함수 전 후의 시간차이를 계산

높은 정밀도를 위해 Performance API의 performance.now()를 사용함.

public onAdd(): void {
    const map = this.getMap();
    if (!map) return;
    this.idleListener = map.addListener('idle', () => {
      const startTime = performance.now();
      this.render();
      const endTime = performance.now();
      console.log(`Execution time: ${endTime - startTime}ms`);
    });
    this.render();
  }

Drag Event 측정 결과

측정 ViewPort

  1. zoom: 12
  2. westLng: 126.800, southLat:37.456, eastLng:127.183, northLat:37.675

image

Origin MarkerClusterer 측정결과

결과 콘솔 
OriginMarkerClusterer.ts:79 true 'given changed'
OriginMarkerClusterer.ts:26 Execution time: 25.40000009536743ms
OriginMarkerClusterer.ts:79 true 'given changed'
OriginMarkerClusterer.ts:26 Execution time: 23.90000009536743ms
OriginMarkerClusterer.ts:79 true 'given changed'
OriginMarkerClusterer.ts:26 Execution time: 24.5ms
OriginMarkerClusterer.ts:79 true 'given changed'
OriginMarkerClusterer.ts:26 Execution time: 22.700000047683716ms
OriginMarkerClusterer.ts:79 true 'given changed'
OriginMarkerClusterer.ts:26 Execution time: 24.5ms
OriginMarkerClusterer.ts:79 true 'given changed'
OriginMarkerClusterer.ts:26 Execution time: 22.700000047683716ms
OriginMarkerClusterer.ts:79 true 'given changed'
OriginMarkerClusterer.ts:26 Execution time: 24.700000047683716ms
OriginMarkerClusterer.ts:79 true 'given changed'
OriginMarkerClusterer.ts:26 Execution time: 23.59999990463257ms
OriginMarkerClusterer.ts:79 true 'given changed'
OriginMarkerClusterer.ts:26 Execution time: 31ms
OriginMarkerClusterer.ts:79 true 'given changed'
OriginMarkerClusterer.ts:26 Execution time: 23.800000190734863ms
OriginMarkerClusterer.ts:79 true 'given changed'
OriginMarkerClusterer.ts:26 Execution time: 25.40000009536743ms
  • true 횟수: 11
  • false 횟수: 0
  • 전체 평균 시간: 24.68ms

Custom MarkerClusterer 측정결과

결과 콘솔 
CustomMarkerClusterer.ts:79 false 'given changed'
CustomMarkerClusterer.ts:26 Execution time: 1.5999999046325684ms
CustomMarkerClusterer.ts:79 false 'given changed'
CustomMarkerClusterer.ts:26 Execution time: 1.2999999523162842ms
CustomMarkerClusterer.ts:79 false 'given changed'
CustomMarkerClusterer.ts:26 Execution time: 1.2000000476837158ms
CustomMarkerClusterer.ts:79 false 'given changed'
CustomMarkerClusterer.ts:26 Execution time: 1.4000000953674316ms
CustomMarkerClusterer.ts:79 false 'given changed'
CustomMarkerClusterer.ts:26 Execution time: 1.2999999523162842ms
CustomMarkerClusterer.ts:79 false 'given changed'
CustomMarkerClusterer.ts:26 Execution time: 1.3999998569488525ms
CustomMarkerClusterer.ts:79 false 'given changed'
CustomMarkerClusterer.ts:26 Execution time: 1.4000000953674316ms
CustomMarkerClusterer.ts:79 false 'given changed'
CustomMarkerClusterer.ts:26 Execution time: 0.8999998569488525ms
CustomMarkerClusterer.ts:79 false 'given changed'
CustomMarkerClusterer.ts:26 Execution time: 0.8999998569488525ms
CustomMarkerClusterer.ts:79 false 'given changed'
CustomMarkerClusterer.ts:26 Execution time: 1.3000001907348633ms
CustomMarkerClusterer.ts:79 false 'given changed'
CustomMarkerClusterer.ts:26 Execution time: 1.1999998092651367ms

  • true 횟수: 0

  • false 횟수: 11

  • 전체 평균 렌더링 시간: 1.23ms

  • 24.68ms ⇒ 1.23ms ( 약 20배 성능 개선 )

Zoom Event 측정결과

Origin MarkerClusterer 측정결과

결과 콘솔 
OriginMarkerClusterer.ts:79 false 'given changed'
OriginMarkerClusterer.ts:26 Execution time: 0.7000000476837158ms
OriginMarkerClusterer.ts:79 true 'given changed'
OriginMarkerClusterer.ts:26 Execution time: 2.700000047683716ms
OriginMarkerClusterer.ts:79 true 'given changed'
OriginMarkerClusterer.ts:26 Execution time: 3.299999952316284ms
OriginMarkerClusterer.ts:79 true 'given changed'
OriginMarkerClusterer.ts:26 Execution time: 14.200000047683716ms
OriginMarkerClusterer.ts:79 true 'given changed'
OriginMarkerClusterer.ts:26 Execution time: 15ms
OriginMarkerClusterer.ts:79 true 'given changed'
OriginMarkerClusterer.ts:26 Execution time: 41.19999980926514ms
OriginMarkerClusterer.ts:79 true 'given changed'
OriginMarkerClusterer.ts:26 Execution time: 19.799999952316284ms
OriginMarkerClusterer.ts:79 true 'given changed'
OriginMarkerClusterer.ts:26 Execution time: 29.200000047683716ms
OriginMarkerClusterer.ts:79 true 'given changed'
OriginMarkerClusterer.ts:26 Execution time: 31.899999856948853ms
OriginMarkerClusterer.ts:79 true 'given changed'
OriginMarkerClusterer.ts:26 Execution time: 46.60000014305115ms
OriginMarkerClusterer.ts:79 true 'given changed'
OriginMarkerClusterer.ts:26 Execution time: 55.799999952316284ms
OriginMarkerClusterer.ts:79 true 'given changed'
OriginMarkerClusterer.ts:26 Execution time: 31.799999952316284ms
OriginMarkerClusterer.ts:79 true 'given changed'
OriginMarkerClusterer.ts:26 Execution time: 32.40000009536743ms
OriginMarkerClusterer.ts:79 true 'given changed'
OriginMarkerClusterer.ts:26 Execution time: 48.200000047683716ms
OriginMarkerClusterer.ts:79 true 'given changed'
OriginMarkerClusterer.ts:26 Execution time: 65.29999995231628ms
OriginMarkerClusterer.ts:79 true 'given changed'
OriginMarkerClusterer.ts:26 Execution time: 52.5ms
OriginMarkerClusterer.ts:79 true 'given changed'
OriginMarkerClusterer.ts:26 Execution time: 38ms
OriginMarkerClusterer.ts:79 true 'given changed'
OriginMarkerClusterer.ts:26 Execution time: 43.09999990463257ms
OriginMarkerClusterer.ts:79 true 'given changed'
OriginMarkerClusterer.ts:26 Execution time: 72ms
OriginMarkerClusterer.ts:79 true 'given changed'
OriginMarkerClusterer.ts:26 Execution time: 55.799999952316284ms
OriginMarkerClusterer.ts:79 true 'given changed'
OriginMarkerClusterer.ts:26 Execution time: 71.40000009536743ms
OriginMarkerClusterer.ts:79 true 'given changed'
OriginMarkerClusterer.ts:26 Execution time: 25ms
OriginMarkerClusterer.ts:79 true 'given changed'
OriginMarkerClusterer.ts:26 Execution time: 32.343432425345323ms
OriginMarkerClusterer.ts:79 true 'given changed'
OriginMarkerClusterer.ts:26 Execution time: 25.498574777532223ms
OriginMarkerClusterer.ts:79 true 'given changed'
OriginMarkerClusterer.ts:26 Execution time: 30.799999952316284ms
OriginMarkerClusterer.ts:79 true 'given changed'
OriginMarkerClusterer.ts:26 Execution time: 22.399999856948853ms
OriginMarkerClusterer.ts:79 true 'given changed'
OriginMarkerClusterer.ts:26 Execution time: 24ms
OriginMarkerClusterer.ts:79 true 'given changed'
OriginMarkerClusterer.ts:26 Execution time: 22.199999809265137ms
OriginMarkerClusterer.ts:79 true 'given changed'
OriginMarkerClusterer.ts:26 Execution time: 10.300000190734863ms
OriginMarkerClusterer.ts:79 true 'given changed'
OriginMarkerClusterer.ts:26 Execution time: 11.700000047683716ms
OriginMarkerClusterer.ts:79 true 'given changed'
OriginMarkerClusterer.ts:26 Execution time: 11ms
OriginMarkerClusterer.ts:79 true 'given changed'
OriginMarkerClusterer.ts:26 Execution time: 10.599999904632568ms
OriginMarkerClusterer.ts:79 true 'given changed'
OriginMarkerClusterer.ts:26 Execution time: 5.299999952316284ms
OriginMarkerClusterer.ts:79 true 'given changed'
OriginMarkerClusterer.ts:26 Execution time: 5.300000190734863ms
OriginMarkerClusterer.ts:79 true 'given changed'
OriginMarkerClusterer.ts:26 Execution time: 5.099999904632568ms
OriginMarkerClusterer.ts:79 true 'given changed'
OriginMarkerClusterer.ts:26 Execution time: 4.900000095367432ms
OriginMarkerClusterer.ts:79 true 'given changed'
OriginMarkerClusterer.ts:26 Execution time: 5.200000047683716ms
OriginMarkerClusterer.ts:79 true 'given changed'
OriginMarkerClusterer.ts:26 Execution time: 2.700000047683716ms
OriginMarkerClusterer.ts:79 true 'given changed'
OriginMarkerClusterer.ts:26 Execution time: 2.5999999046325684ms
OriginMarkerClusterer.ts:79 true 'given changed'
OriginMarkerClusterer.ts:26 Execution time: 2.799999952316284ms
OriginMarkerClusterer.ts:79 true 'given changed'
OriginMarkerClusterer.ts:26 Execution time: 2.6999998092651367ms
OriginMarkerClusterer.ts:79 true 'given changed'
OriginMarkerClusterer.ts:26 Execution time: 2.5999999046325684ms
OriginMarkerClusterer.ts:79 true 'given changed'
OriginMarkerClusterer.ts:26 Execution time: 2ms
  • true일 때:
    • 횟수: 43
    • 평균 시간: 24.48ms
  • 전체 평균 시간 : 24.48ms (43번의 zoom event)

Custom MarkerClusterer 측정결과

결과 콘솔 
CustomMarkerClusterer.ts:26 Execution time: 0.5999999046325684ms
CustomMarkerClusterer.ts:79 false 'given changed'
CustomMarkerClusterer.ts:26 Execution time: 0.7999999523162842ms
CustomMarkerClusterer.ts:79 true 'given changed'
CustomMarkerClusterer.ts:26 Execution time: 2.799999952316284ms
CustomMarkerClusterer.ts:79 true 'given changed'
CustomMarkerClusterer.ts:26 Execution time: 3.9000000953674316ms
CustomMarkerClusterer.ts:79 true 'given changed'
CustomMarkerClusterer.ts:26 Execution time: 10.400000095367432ms
CustomMarkerClusterer.ts:79 true 'given changed'
CustomMarkerClusterer.ts:26 Execution time: 12.200000047683716ms
CustomMarkerClusterer.ts:79 true 'given changed'
CustomMarkerClusterer.ts:26 Execution time: 18.90000009536743ms
CustomMarkerClusterer.ts:79 true 'given changed'
CustomMarkerClusterer.ts:26 Execution time: 19.299999952316284ms
CustomMarkerClusterer.ts:79 true 'given changed'
CustomMarkerClusterer.ts:26 Execution time: 23.40000009536743ms
CustomMarkerClusterer.ts:79 true 'given changed'
CustomMarkerClusterer.ts:26 Execution time: 32.799999952316284ms
CustomMarkerClusterer.ts:79 true 'given changed'
CustomMarkerClusterer.ts:26 Execution time: 36.200000047683716ms
CustomMarkerClusterer.ts:79 true 'given changed'
CustomMarkerClusterer.ts:26 Execution time: 48.700000047683716ms
CustomMarkerClusterer.ts:79 true 'given changed'
CustomMarkerClusterer.ts:26 Execution time: 35.299999952316284ms
CustomMarkerClusterer.ts:79 true 'given changed'
CustomMarkerClusterer.ts:26 Execution time: 43.59999990463257ms
CustomMarkerClusterer.ts:79 true 'given changed'
CustomMarkerClusterer.ts:26 Execution time: 34ms
CustomMarkerClusterer.ts:79 true 'given changed'
CustomMarkerClusterer.ts:26 Execution time: 38.09999990463257ms
CustomMarkerClusterer.ts:79 true 'given changed'
CustomMarkerClusterer.ts:26 Execution time: 61.700000047683716ms
CustomMarkerClusterer.ts:79 true 'given changed'
CustomMarkerClusterer.ts:26 Execution time: 42.40000009536743ms
CustomMarkerClusterer.ts:79 true 'given changed'
CustomMarkerClusterer.ts:26 Execution time: 34.09999990463257ms
CustomMarkerClusterer.ts:79 true 'given changed'
CustomMarkerClusterer.ts:26 Execution time: 35.700000047683716ms
CustomMarkerClusterer.ts:79 true 'given changed'
CustomMarkerClusterer.ts:26 Execution time: 42.5ms
CustomMarkerClusterer.ts:79 true 'given changed'
CustomMarkerClusterer.ts:26 Execution time: 52ms
CustomMarkerClusterer.ts:79 true 'given changed'
CustomMarkerClusterer.ts:26 Execution time: 45.59999990463257ms
CustomMarkerClusterer.ts:79 true 'given changed'
CustomMarkerClusterer.ts:26 Execution time: 35.299999952316284ms
CustomMarkerClusterer.ts:79 true 'given changed'
CustomMarkerClusterer.ts:26 Execution time: 24.600000143051147ms
CustomMarkerClusterer.ts:79 false 'given changed'
CustomMarkerClusterer.ts:26 Execution time: 1.1999998092651367ms
CustomMarkerClusterer.ts:79 false 'given changed'
CustomMarkerClusterer.ts:26 Execution time: 0.8999998569488525ms
CustomMarkerClusterer.ts:79 false 'given changed'
CustomMarkerClusterer.ts:26 Execution time: 1.2000000476837158ms
CustomMarkerClusterer.ts:79 true 'given changed'
CustomMarkerClusterer.ts:26 Execution time: 10.799999952316284ms
CustomMarkerClusterer.ts:79 false 'given changed'
CustomMarkerClusterer.ts:26 Execution time: 1ms
CustomMarkerClusterer.ts:79 false 'given changed'
CustomMarkerClusterer.ts:26 Execution time: 1.0999999046325684ms
CustomMarkerClusterer.ts:79 false 'given changed'
CustomMarkerClusterer.ts:26 Execution time: 0.7999999523162842ms
CustomMarkerClusterer.ts:79 true 'given changed'
CustomMarkerClusterer.ts:26 Execution time: 6.8999998569488525ms
CustomMarkerClusterer.ts:79 false 'given changed'
CustomMarkerClusterer.ts:26 Execution time: 0.7999999523162842ms
CustomMarkerClusterer.ts:79 false 'given changed'
CustomMarkerClusterer.ts:26 Execution time: 0.7999999523162842ms
CustomMarkerClusterer.ts:79 false 'given changed'
CustomMarkerClusterer.ts:26 Execution time: 1ms
CustomMarkerClusterer.ts:79 false 'given changed'
CustomMarkerClusterer.ts:26 Execution time: 1.2000000476837158ms
CustomMarkerClusterer.ts:79 true 'given changed'
CustomMarkerClusterer.ts:26 Execution time: 2.700000047683716ms
CustomMarkerClusterer.ts:79 false 'given changed'
CustomMarkerClusterer.ts:26 Execution time: 0.9000000953674316ms
CustomMarkerClusterer.ts:79 false 'given changed'
CustomMarkerClusterer.ts:26 Execution time: 1ms
CustomMarkerClusterer.ts:79 false 'given changed'
CustomMarkerClusterer.ts:26 Execution time: 0.9000000953674316ms
CustomMarkerClusterer.ts:79 false 'given changed'
CustomMarkerClusterer.ts:26 Execution time: 0.9000000953674316ms
CustomMarkerClusterer.ts:79 true 'given changed'
CustomMarkerClusterer.ts:26 Execution time: 2.3999998569488525ms

  • true일 때:

    • 횟수: 27
    • 평균 시간: 28.01ms

  • false일 때:

    • 횟수: 16
    • 평균 시간: 0.94ms

  • 전체 평균 시간: 17.9374ms (43번의 zoom event)

  • 24.48ms ⇒ 17.937ms (약 36% 성능 개선)

오늘의 길

🧸 프로젝트 소개

핵심 경험

장소 검색 기능 개선
마커 클러스터링
테스트 코드
로그 모니터링 시스템
React 컴포넌트로 구글 지도 요소 관리하기
CI/CD 파이프라인
코스 아이템 순서 수정 방식 개선

개발 문서

🚧 개발 일지

📖 학습 공유

🎒 백로그

팀 문화

⛺️ 그라운드 룰

🍞 깃허브 컨벤션

기록 모음

🌤️ 데일리 스크럼
📑 회의록
🚸 멘토링 일지
🏖️ 그룹 회고
Clone this wiki locally