Angular JS：rest API被延迟调用

我试图从我的AngularJS代码中调用一些REST API。在查看页面加载时间时（比如通过开发者工具 - >在Firefox等浏览器中的网络），页面中的图标会很快加载。然后大约有100到200毫秒的差距，只有在这之后REST API才会被调用。我曾一个简单的例子，在这里Plunkr： http://plnkr.co/edit/aTk8D9RXdmqBXoCwpVuG?p=preview Angular JS：rest API被延迟调用

return $http({ 
method: 'GET', 
url: 'http://rest-service.guides.spring.io/greeting' 
}); 
} 
return restAPIs; 
}) 
.controller('AppCtrl', function($scope,restFactoryService){ 

    restFactoryService.getInstanceDetails().success(function (data){ 
     $scope.datas=data; 
    }); 
});

我在我的原代码中使用NG-重复。我最初认为这是由于这种缓慢。但是，正如您在上面看到的，即使使用简单的REST API调用，也会发生延迟。另请参阅下面的屏幕截图，显示页面加载。您可以看到该页面以80毫秒加载。然后，直到240ms才会出现间隙，之后才会调用REST API。 80ms到240ms之间发生了什么？为什么REST API本身不能调用80ms？

enter image description here

有人可以帮忙吗？

来源

2014-09-24 Jean

我不确定我是否理解你的问题...你问“为什么这个Ajax请求需要一些时间”？ – enguerranws 2014-09-24 13:26:39

您是否在请求之前放置了一个'调试器'来查看它到达的时间？ – DontVoteMeDown 2014-09-24 13:28:55

@enguerranws我的问题是：在80毫秒后，我们在浏览器中看到什么都没有发生，直到240ms。为什么这个暂停？ – Jean 2014-09-24 15:07:50

当然，请求不是在确切80ms的发送，因为里面有$http方法一些类似的代码读取配置，构建数据，创建HTTP请求对象，......这一切的确实需要时间这会导致延迟，直到请求实际上在线路上。

正在发生的事情这里面$http方法采取代码的时间80毫秒和240毫秒的时间框架之间

。

确切地说，也有来引导你的角度应用程序，创建所用的时间你restFactoryService，使restFactoryService.getInstanceDetails()函数调用，...

来源

2014-10-04 12:48:39

实际上，对'$ http'的调用需要约1ms，引导应用程序少于<25ms（给角度编译带来毛利差错）。 – 2014-10-04 14:17:09

@artur grzesiak：这里的要点是：请求不会立即发送，需要花费时间来初始化应用程序（在我的回答中提到了一些）并拨打电话。我放了......因为我不想详细说明。我只是想'提高认识'，请求只在初始化后发送，进行函数调用，.. – 2014-10-04 14:24:26

我更新你plunker并添加了一堆performance.now() s到获得详细信息。第一个时间戳被放在html中作为head的第一个元素。

这里是我[以毫秒为单位所有结果] - 确切的数字可能是从运行不同的运行：

Application ready after: 207.77. 
Window loaded after: 281.24 
Http requested started after 13.47 after ready. 
Http response came after 161.80 after the request. 
$http call took less than 0.88.

这里被更新PLNKR。

看来它需要〜200ms解析所有的HTML和JavaScript。顺便说一句。角开始在DOMContentLoaded（more about bootstrap）上引导您的应用程序。

来源

2014-10-04 14:04:58

如果有人需要缓解差距，我会建议使用一些预加载技术。 – 2014-10-09 21:05:25

如果您检查铬合金上的撬块，您会发现没有太长的延迟。在IE 11上也有一个小的差距（就像在你的Firefox中），但我看到greetings webservice正在等待angular.min.js.map文件被检索。这可能表明此浏览器使用较少的网页连接数。之后，如果你重新运行代码 - 没有找到差距。

来源

2014-10-09 08:24:26 Seti

Angular JS：rest API被延迟调用

回答

相关问题