Как улучшить эту производительность JavaScript google map

Наша текущая страница использует CDN и google map api для отображения данных. Загрузка всей страницы занимает около 7 секунд. Для загрузки страницы Google на самом деле занимает около 3 секунд. Вот фрагмент кода, который я извлек.Как улучшить эту производительность JavaScript google map

<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.

enter image description here

Мы хотим, чтобы улучшить производительность. Вот несколько способов, о которых я могу сейчас думать, но я не уверен, в каком направлении я должен действовать.

Изменение кода для ленивой загрузки.
Используйте google static map api, когда страница загружена, когда пользователь щелкнул ее, используйте google map api. Я думаю, что этот подход может быть слишком сложным.

Могу ли я узнать дополнительные альтернативы для улучшения производительности страницы

Большое спасибо заранее

источник

2015-05-11 Cloud tech

Я бы повторил проверку без вызова fonts.googleapis.com. Я вижу там и любые другие крупные активы, которые могут использовать локальную пропускную способность при загрузке карт google. – Radio

@Radio Я думаю, что fonts.googleapis.com фактически используется картами api для загрузки шрифта Roboto. –

Ну, это ужасно. Во всяком случае, поскольку gmaps - это распределенное приложение с широким распределением, я не думаю, что есть много для улучшения времени загрузки с кодом, представленным OP. – Radio

Если вы просто ищете, чтобы уменьшить общее количество HTTP-запросов, которые сделали или байты передаются при загрузке страницы с использованием API статических карт - хорошая идея, но я бы потратил больше времени на оценку производительности, прежде чем совершать этот скачок.

Водопад, который вы видите в Инструментах разработчика, может не соответствовать фактическому времени, которое требуется пользователям для восприятия того, что Map API доступен. За кулисами API Карт пытается отобразить карту пользователям очень быстро и постепенно загружать JavaScript, необходимые для того, чтобы сделать эту карту интерактивной на основе требуемых вызовов API.

Основываясь на изображении, которое вы поделили выше, похоже, что значительное время идет на поиск DNS для каждого имени хоста, с которого загружается API. Я бы попробовал несколько тестов [1], чтобы узнать, есть ли более быстрые DNS-серверы, которые вы могли бы использовать.

источник

2015-05-11 20:49:55 bamnet

Как улучшить эту производительность JavaScript google map

ответ

Смежные вопросы