你如何衡量谷歌地图加载时间

Question

我正在使用大量针脚优化Google地图。我想知道我正在做的事情是否会产生一些影响但是除了在javascript中的EndTime-StartTime之外我不知道任何其他方法。

你能帮助我一些想法吗？

Answer 1

您可以通过两种方式执行此操作：

1. 在Google地图的初始化方法之前和之后添加startDate和endDate。
2. 这非常简单，只需打开您的开发工具，然后在 network 标签中，您可以衡量加载脚本的时间表。

经过一些搜索，我发现这个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()));
     }
   });
});

在Google的此示例屏幕截图中，使用此策略在蓝色边界框内只能看到一部分标记：

与现有代码相比，调整此策略可能会让您立即获得最大的收益。

如果这还不够，我建议使用递归异步函数将标记添加到屏幕，例如：

// 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);