У меня есть веб-приложение angularJS, использующее карты Google.В целях повышения производительности я бы хотел расставить приоритеты по загрузке страницы или, по крайней мере, по критическому пути рендеринга, поэтому я бы хотел отложить загрузку карт Google после загрузки страницы.
Чтобы получить немного больше подробностей, на самом делеУ меня есть скрипт, который загружает карты Google на странице индекса, например:
<html ng-app="myApp">
<head></head>
<body>
<!-- My code here -->
<script async defer type="text/javascript" src="//maps.googleapis.com/maps/api/js?v=3.37"></script>
</body>
</html>
Кроме того, у меня есть частичное представление шаблона, в котором есть директива, использующая карты Google.
<boats-map location="Spain" zoom="8" class="map-container"></boats-map>
Я думаю, что детали директивы не имеют отношения к проблеме.Но должно быть что-то вроде:
.directive('boatsMap', [
function() {
function link(scope, element, attrs) {
console.log("Map loaded");
// Do whatever logic
}
Все работает, как сказано, это только для повышения производительности, но что я заметил в сети водопад devtools, так это то, что когда я комментирую скрипт, который загружает карты Googleа также директива, на мой взгляд, моя страница и критический путь рендеринга загружаются примерно на 3 секунды раньше.
Итак, я бы хотел отложить эту функцию до полной загрузки страницы.
Обратите внимание, что сценарий использует асинхронную и отложенную загрузку сценария, но это не исключает большого влияния на загрузку.
Я читал такие подходы: Как сделатьЯ загружаю внешний javascript google maps после загрузки страницы? , но не уверен, что это угловой путь.
Пожалуйста, найдите скриншот производительности: 1. С помощью скрипта google maps: 
Комментирование скрипта Google Maps:
