如何提高谷歌地圖js代碼的性能

Question

我們當前的頁面使用CDN和Google Map 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命中網站的屏幕截圖。

我們要提高性能。 我現在可以考慮以下幾種方法，但是我不確定應該采用哪種方法。

1. 更改要延遲加載的代碼。
2. 頁面加載時使用google static map api，當用戶單擊頁面時，請使用google map api。 我認為這種方法可能太復雜了。

我可以知道其他替代方法來改善頁面的性能嗎

提前謝謝了

Answer 1

如果您只是想減少使用Static Maps API加載頁面時發出的HTTP請求總數或傳輸的字節數，這是個好主意，但是在進行這一飛躍之前，我將花更多的時間評估性能。

在開發人員工具中看到的瀑布可能與用戶感知Map API可用的實際時間不對應。 在后台，Maps API會嘗試非常快速地向用戶顯示地圖，並逐步加載所需的JavaScript，以基於所需的API調用使該地圖具有交互性。

根據您在上面共享的圖像，對於從中加載API的每個主機名似乎都需要花費大量時間進行DNS查找。 我將運行一些測試[1]，以查看是否可以使用更快的DNS服務器。