Google지도로드 시간을 측정하는 방법

Question

많은 핀이있는 Google지도 최적화 작업을하고 있습니다. 내가 뭘하는지 내가 어떤 영향을하지만 자바 스크립트에서 EndTime - StartTime 옆에 있는지보고 싶다; t는 다른 방법을 안다.

몇 가지 아이디어를 제공해 주시겠습니까?

Answer 1

두 가지 방법으로이 작업을 수행 할 수 있습니다

1. 이전과 구글 맵의 초기화 방법 후 startDate 및 endDate을 추가하여.
2. 이것은 매우 쉽습니다. 개발자 도구를 열어서 network 탭 내에서 로딩 스크립트의 타임 라인을 측정 할 수 있습니다.

I는이 answer을, 발견 된 일부 검색에 대한 console.time, 당신이 작업이 걸리는 시간을 추적하는 데 사용할 수있는 타이머가 시작되면.

Answer 2

나는이 문제에 대한 다른 접근 방식을 제안 할 수 있습니다. 코드를 조작하면 신원 문제 영역이 확실히 도움이되지만, 성능 문제의 원인을 이미 알고 있다고 생각합니다.지도 캔버스에 그려지는 마커의 수입니다.

나는 비슷한 상황에 직면하여 viewport management strategy을 사용하여지도에서 많은 수의 항목의 성능을 최적화했습니다. 기본 이론은지도의 bounds_changed 이벤트를지도의 idle 이벤트와 함께 처리하는 것입니다. 마커의 하위 집합 만이 사용하는 파란색 경계 상자 안에 볼 것 구글이 예제 스크린 샷에서

// anonymous function that sets only the markers inside the map's viewport 
// as visible; all markers outside the active viewport are set as invisible 
// to boost performance 
google.maps.event.addListener(map, 'bounds_changed', function() { 
    // wait until the pan/zoom has stopped before processing the viewport 
    google.maps.event.addListenerOnce(map, 'idle', function() { 
    var bounds = map.getBounds(); 

    for (var i = 0, length = markers.length; i < length; i++) { 
     marker.setVisible(bounds.contains(marker.getPosition())); 
    } 
    }); 
}); 

: 그것은 같은 것을 사용하여 현재 뷰포트를 벗어나면 쉽게 보려면 각 마커를 확인하실 수 있습니다 전략 :

당신에게 당신의 기존 코드를 인스트루먼트에 비해 즉시 벅에 대한 가장 큰 강타를 줄 가능성이 것이 전략을 적응. 이 충분하지 않으면, 내가 좋아하는, 화면에 마커를 추가하는 재귀 비동기 기능을 사용하는 것이 좋습니다

:

// the Bermuda triangle 
var coords = [ 
    new google.maps.LatLng(25.774252, -80.190262), 
    new google.maps.LatLng(18.466465, -66.118292), 
    new google.maps.LatLng(32.321384, -64.75737) 
]; 

// a variable to keep track of markers added to the map 
var markers = []; 

var addMarker = function addMarker() { 
    var marker, 
     position; 

    if (coords.length === 0) { 
    return; 
    } 

    // dequeue a coord from the queue of coords to process 
    position = coords.unshift(); 

    // create a marker for the coord 
    var marker = new google.maps.LatLng({ 
    position: position, 
    visible: bounds.contains(position), 
    map: map 
    }); 

    // store the reference to the new marker 
    markers.push(marker); 

    // recursively call this function 
    // using setTimeout to wait until the JS event loop 
    // is idle 
    window.setTimeout(addMarker, 0); 
}; 

// start the async processing of the coords 
window.setTimeout(addMarker, 0);