如何改善这个谷歌地图js代码性能

Question

我们当前的页面使用CDN和谷歌地图api来显示数据。总共加载页面大约需要7秒钟。 Google地图实际上需要大约3秒才能加载页面。这是我提取的代码片段。

<script src="https://maps.googleapis.com/maps/api/js"></script>
<script>
        function initialize() {
            var mapCanvas = document.getElementById('map-canvas');
            var myOptions = {
                zoom: 15,
                minZoom: 4,
                scrollwheel: false,
                center: new google.maps.LatLng(-37.814382, 144.96974),
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };

            map = new google.maps.Map(mapCanvas, myOptions);
            new google.maps.Marker({
                map: map,
                position: new google.maps.LatLng(-37.814382, 144.96974),
                title: "120 Collins St, Melbourne, VIC 3000, Australia"
            });
        }
        google.maps.event.addDomListener(window, 'load', initialize);
</script>   

以下是google map api hits网站的截图。

我们希望改善效果。以下是我现在可以想到的几种方法，但我不确定应该采用哪种方式。

1. 将代码更改为延迟加载。
2. 加载页面时使用google静态地图api，当用户点击它时，请使用google map api。我认为这种方法可能过于复杂。

我是否知道其他替代方法可以改善页面的性能

非常感谢提前

Answer 1

如果您只是想减少使用Static Maps API加载页面时发出的HTTP请求总数或传输的字节数是一个好主意，但我会花更多的时间来评估性能，然后才能实现这一飞跃

您在开发者工具中看到的瀑布可能与用户感知Map API可用所需的实际时间不对应。在幕后，Maps API会尝试非常快速地向用户显示地图，并逐步加载所需的JavaScript，以根据您需要的API调用使地图进行交互。

根据您上面分享的图片，看起来很重要的时间是为API加载的每个主机名进行DNS查找。我会运行一些测试[1]来查看是否有更快的DNS服务器可供您使用。