2014-09-24 2 views
2

AngularJS 코드에서 일부 REST API를 호출하려고합니다. 페이지로드 시간 (Firefox와 같은 브라우저에서 개발자 도구 -> 네트워크를 통해 말하기)을 보면 페이지의 아이콘이 빠르게로드됩니다. 그런 다음 약 100 ~ 200ms 간격이 있으며, 그 후에 만 ​​REST API가 호출됩니다. 여기 Plunkr에서 간단한 예제를했다 : 내 원래의 코드에서 NG 반복을 사용했다 http://plnkr.co/edit/aTk8D9RXdmqBXoCwpVuG?p=previewAngular JS : 나머지 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; 
    }); 
}); 

. 처음에는 그 속도 저하가 그 때문이라고 생각했습니다. 그러나 위에서 볼 수 있듯이 간단한 REST API 호출을 사용해도 지연이 발생합니다. 또한 페이지로드를 보여주는 아래 스크린 샷을 참조하십시오. 페이지가 80ms에로드되는지 확인할 수 있습니다. 그런 다음 240ms가 될 때까지 갭이 생기고 그 이후에는 REST API가 호출됩니다. 80ms에서 240ms 사이에 무슨 일이 일어나고 있습니까? REST API를 80ms 자체에서 호출 할 수없는 이유는 무엇입니까? 누군가가

enter image description here

를 도와 주시겠습니까? HTTP 요청 객체를 생성,의 설정을 읽어 데이터를 구축하는 등의 $http 방법 내부의 코드가 때문에

+1

나는 당신의 문제를 이해하고 있는지 확신하지 못합니다 ... "왜이 아약스 요청에 시간이 필요합니까?" – enguerranws

+0

요청 전에 도달 한 시간을 확인하기 위해'debugger'를 넣었습니까? – DontVoteMeDown

+0

@enguerranws ​​내 질문입니다 : 80ms 후, 우리는 240ms까지 아무것도 일어나지 않는 브라우저에서 볼 수 있습니다. 왜 이렇게 멈출까요? – Jean

답변

1

물론이 요청이 정확히 일치 평균 80ms에 전송되지 않습니다 ....이 의 모든 시간을 가지고 간다은 요청이 실제로 유선에 도착할 때까지 지연을 유발합니다. $http있어서 내부 코드에 의해 걸리는 시간 있다는

시간대 평균 80ms 240ms 사이에 일어나는 어떤

.

+0

사실'$ http '에 대한 호출은 ~ 1ms가 걸리고, 응용 프로그램을 부트 스트랩하는 것은 <25ms보다 작습니다 (각도 컴파일시 총 마진 오류가 발생합니다). –

+0

@artur grzesiak : 요점은 다음과 같습니다. 요청이 즉시 전송되지 않고 앱을 초기화하는 데 걸린 시간이 있습니다 (일부는 내 대답에 언급되어 있음). 나는 자세하게 들어가고 싶지 않기 때문에 ... 넣는다. 나는 단지 초기화가 끝나고 함수 호출을하는 경우에만 요청이 보내지는 것을 '알리기'를 원합니다. –

4

, ... 작성하여 각 응용 프로그램을 부트 스트랩하는 데 걸리는 시간이 당신의 restFactoryService, restFactoryService.getInstanceDetails() 함수 호출을도있다, 정확하게하려면 나는 상세 정보를 얻을 수 performance.now()의 잔뜩 당신이 plunker 업데이트 및 추가 . 첫 번째 타임 스탬프는 head의 첫 번째 요소로 html에 배치됩니다. 여기

은 내가 가진 무엇 [MS의 모든 결과] - 정확한 숫자는 실행하는 실행과 다를 수 있습니다 : 여기

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 업데이트됩니다.

모든 HTML과 자바 스크립트를 구문 분석하는 데 ~ 200ms가 걸리는 것으로 보입니다. Btw. 각도가 DOMContentLoaded (more about bootstrap)에 앱 부트 스트래핑을 시작합니다.

+1

어쨌든 갭을 줄여야 할 필요가 있다면, 몇 가지 예고 기법을 사용할 것을 제안합니다. –

1

크롬에서 플 런커를 확인하면 너무 오래 지연되지 않습니다. IE 11에는 (Firefox에서와 같이) 작은 간격도 있지만, webservice가 angular.min.js.map 파일을 검색 할 때까지 기다리는 것을 볼 수 있습니다. 이는이 브라우저가 웹 페이지에 대한 연결 수를 적게 사용함을 나타냅니다. 그 후 코드를 다시 실행하면 갭이 발견되지 않습니다.