为什么 PhoneGap Geolocation API 导致我的页面加载如此缓慢？

Question

在 Cordova/PhoneGap 3.4 环境中使用地理定位插件有点问题。 我没有在 onDeviceReady 中加载 Geolocation API，因为它依赖于加载 Google Maps API，我很确定如果在初始加载时从 Internet 请求，提交给 App Store 的任何应用程序都会被拒绝（任何人都可以随意确认反驳这一点） .

我正在使用 Jquery Mobile 1.4.2 并将地理定位代码放在一个单独的“定位器”页面上，该页面不通过 ajax 加载。然后我调用 geolocation on 按钮以在 Google Map 上显示用户的位置。

我正在 iPad 上测试应用程序，除了 Geolocation 似乎总是在第一次检测位置时失败（我最近发布过这个问题）之外，javascript 似乎延迟了页面加载长达近 3 秒（即使在 iOS 模拟器上！）。

我知道过度使用 javascript 会导致 PG 应用程序出现一些延迟，但我不相信这里会发生这种情况。我正在调用所有的 javascript 内联：

<script type="text/javascript" charset="utf-8">
    // onSuccess Geolocation
    //
    function onSuccess(position) {
        var element = document.getElementById('geolocation');
        //OUTPUT COORDINATES INFORMATION INTO HTML
    element.innerHTML = '<h2>Detailed Gelocation information</h2><table class="geoTable"><tr><td class="noborder"></td><th>Latitude</th><th>Longitude</th><th>Altitude</th><th>Accuracy</th><th>Altitude Accuracy</th><th>Heading</th><th>Speed</th><th>Timestamp</th></tr>' +
            '<tr><td class="head">Data Value</td>' +
            '<td class="centre">' + position.coords.latitude  + '</td>' +
            '<td class="centre">' + position.coords.longitude + '</td>' +
            '<td class="centre">'  + position.coords.altitude + '</td>' +
            '<td class="centre">'  + position.coords.accuracy + '</td>' +
            '<td class="centre">'  + position.coords.altitudeAccuracy + '</td>' +
            '<td class="centre">'  + position.coords.heading + '</td>' +
            '<td class="centre">'  + position.coords.speed   + '</td>' +
            '<td class="centre">' + new Date(position.timestamp) + '</td></tr>'+
            '</table>' +
            '<p align="center"><button data-theme="h" onclick="resetLocation();">Clear GPS Location</button><br /></p>';


                    //GET LOCATION VARIABLES FROM API
                    var lat = position.coords.latitude;
                    var lng = position.coords.longitude;
                    var yourStartLatLng = new google.maps.LatLng(lat, lng);

                    //PUT GMAPS INFORMATION INTO PAGE
                    $('#map_canvas').gmap({'center': yourStartLatLng});
                    $('#map_canvas').gmap('option', 'zoom', 19);
                    $('#map_canvas').gmap('option', 'mapTypeId', google.maps.MapTypeId.SATELLITE);
                    $('#map_canvas').gmap('addMarker', {
                                                        'position': yourStartLatLng, 
                                                        'draggable': false, 
                                                        'bounds': false
                                                        });
    }
    // onError Callback sends user an alert message and refreshes screen to load all scripts again
    //
    function onError(error) {
        alert('The Freshwater application failed to get your location. Please ensure that you have a successful WIFI or 3G/4G internet connection when using the Geolocation feature. ' +
              'The Locator screen will now be refreshed. Please attempt Geolocation again.');

    //navigator.geolocation.getCurrentPosition(onSuccess, onError,
      //{ maximumAge: 3000, timeout: 5000, enableHighAccuracy: false } );
        //PUT A TIMER ON ERROR TO REFRESH PAGE FOR GPS
        setTimeout("window.location+='?refreshed';", .1000); 
    }

//RESET GEOLOCATION PAGE TO TAKE ANOTHER LOCATION READING
    function resetLocation(){
        setTimeout("window.location+='?refreshed';", .1000); 
    }

    //ATTACH FUNCTION TO BUTTON TO CALL GEOLOCATION
  function getLocation() {
        navigator.geolocation.getCurrentPosition(onSuccess ,onError,
      { timeout: 1000, enableHighAccuracy: true } );
    }
</script>

我知道，当我从页面中删除它们并测试页面加载时间时，绝对是地理定位调用导致了延迟。有没有人遇到过同样的问题？有谁知道为什么它会如此严重地影响页面加载时间？

Answer 1

这里有点耳光。刚刚意识到是通过 javascript 加载的 Google Map Api 导致了问题。我尝试通过在页面下方加载外部脚本来解决它，但我只经历了很小的改进。

catch 22 是我需要在页面中调用这个 JS。是否可以在页面加载外部 js 脚本的同时显示加载器栏/图形显示，以便在澳大利亚以相对“马马虎虎”的连接速度下载的几秒钟内至少发生了一些事情？