Ajax 이벤트에 대한 브라우저 Navigation Timing API를 한 페이지 앱에서 사용할 수 있습니까?그렇지 않다면, 좋은 도구는 무엇입니까?

Ajax 이벤트에 대한 브라우저 Navigation Timing API를 한 페이지 앱에서 사용할 수 있습니까?그렇지 않다면, 좋은 도구는 무엇입니까?

우리는 Ajax가 서버에 호출하고 복잡한 데이터 캐싱 및 DOM 렌더링을 수행하는 Knout and Backbone으로 구축된 단일 페이지 앱을 가지고 있습니다.사용자가 보는 대로 성능을 측정하고 서버에 다시 기록하고 싶습니다.브라우저 Navigation Timing API가 이것에 유용할 것인지 아닌지에 대해 나는 이해할 수 없을 것 같습니다.예에서 본 바와 같이 네비게이션 타이밍 API는window.performance그리고 이는 페이지 로드로 제한되며 Ajax 동작을 모니터링하기에 적합하지 않습니다.참인가 거짓인가요?거짓일 경우 다른 어떤 것을 사용할 수 있습니까?

서버 결과로 DOM 렌더링을 수행하는 Ajax 호출과 같이 시간을 측정할 사용자 지정 계측 지점을 설정하고 싶습니다.

1 - 맞아요, 창.성능은 페이지 로드와 연결됩니다.이를 보여주는 아래 예를 참조하십시오.

    <button id='searchButton'>Look up Cities</button>
    <br>
    Timing info is same? <span id='results'></span>
    <script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.4.4/underscore-min.js"></script>
    <script type="text/javascript">
        jQuery('#searchButton').on('click', function(e){
            // deep copy the timing info
            var perf1 = jQuery.extend(true, {}, performance.timing);             
            // do something async
            jQuery.getJSON('http://ws.geonames.org/searchJSON?featureClass=P&style=full&maxRows=10&name_startsWith=Denv', function() {
                // get another copy of timing info
                var perf2 = jQuery.extend(true, {}, performance.timing);
                // show if timing information has changed
                jQuery('#results').text( _.isEqual( perf1, perf2 ) );
            });
            return false;
        });
    </script>

또한 이 개체를 지원하지 않는 이전 브라우저에서 데이터가 누락된 경우도 있습니다.

2 - 부메랑 프로젝트는 웹타이밍 API를 넘어 구형 브라우저도 지원하는 것 같습니다.본 컨퍼런스에 나열된 현재 유지 관리자의 슬라이드와 샘플 코드로 이야기가 있습니다.직접 링크가 없어서 죄송합니다.

사용자 타이밍 API(W3C Recommendation 12 December 2013)를 사용하면 자바스크립트의 여러 부분에 API 호출을 삽입한 후 상세한 타이밍 데이터를 추출할 수 있습니다.

당신은 그것을 사용합니다.mark(), 웹 애플리케이션에서 '마크'를 치는데 얼마나 걸렸는지 알 수 있게 해주고, 그리고 나서measure()표시 사이의 시간을 계산할 수 있습니다.

특정한 경우에는 다음과 같은 것을 사용할 수 있습니다.

app.render = function(content){
  myEl.innerHTML = content;
  window.performance.mark('end_render');
  window.performance.measure('measure_render', 'start_xhr', 'end_render');
};


var req = new XMLHttpRequest();
req.open('GET', url, true);
req.onload = function(e) {
  window.performance.mark('end_xhr');
  window.performance.measure('measure_xhr', 'start_xhr', 'end_xhr');
  app.render(e.responseText);
}
window.performance.mark('start_xhr');
myReq.send();

에 대한 약간의 지원이 있는 것 같습니다.window.performance.getEntries(), 페이지에 로드된 모든 리소스와 URL에 대한 세부 정보를 제공합니다.이 API를 지원하는 브라우저의 경우 AzurePing.info 의 jsonp(XMLHtpRequest가 아님) 요청에 이 API를 사용하여 다음으로 돌아갑니다.new Date().getTime()그렇지 않은 사람들을 위해.

작성 시 IE 10 및 Chrome 지원getEntries, 하지만 파이어폭스는 그렇지 않습니다.안타깝게도 Chrome과 IE에서도 모든 타이밍 속성이 설정되어 있지는 않습니다.제가 의지할 수 있는 건fetchStart,responseEnd,그리고.duration.

샘플 소스는 GitHub에 있습니다.

내비게이션 타이밍 API는 단일 페이지 애플리케이션 성능을 측정하는 데 큰 도움이 되지 않는다고 생각합니다.

이미 언급된 User Timing API와 함께 Resource Timing API가 실제로 훨씬 더 도움이 됩니다.이 API는 사용자 세션에서 수행된 모든 요청에 대한 타이밍을 검색하는 기능을 제공합니다(실제로 대부분의 브라우저에서 개발자 도구의 네트워크 탭에 표시되는 모든 것).이러한 타이밍에는 왕복 시간과 DNS 조회 시간 등이 포함됩니다.

유감스럽게도, 이것은 비교적 새로운 사양이며 아직 모든 브라우저에 구현되지는 않았습니다.Chrome과 IE > 10은 (아직 완료되지는 않았지만) 구현을 제공합니다.놀랍게도 IE는 지금 가장 많은 유니트를 구현한 것 같습니다.

두 가지 방법이 있습니다.

1. 자원 타이밍 API
2. XMLHTTP 요청 래핑

그들 사이의 차이점을 알아보겠습니다.

1. 자원 타이밍 API

브라우저는 최근 리소스 타이밍 API에 대한 지원을 추가했습니다.리소스 타이밍 API는 기본적으로 앱에서 로드되는 각 리소스에 대한 타이밍 정보를 가지고 있습니다.css, javascript 또는 AJAX 요청일 수 있습니다.리소스 세부 정보 목록을 다음과 같이 가져올 수 있습니다.

  performance.getEntriesByType('resource');

수 합니다. 요청을 찾을 수 있습니다.initiatorType은것것 같은 것xmlhttprequest 몇 가지. 하지만 몇 가지 한계가 있습니다.

1. 기본적으로 최대 리소스 크기는 150입니다.위 배열에는 최대 150개의 리소스만 있습니다. Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δperformance.setResourceTimingBufferSize(500).
2. AJAX 요청이 성공했는지 실패했는지에 대한 정보는 얻을 수 없습니다.

2. XMLHTTP 요청 래핑

XMLHTTPRequest API를 랩핑할 수 있다면 타이밍, 상태 코드, 바이트 크기 등 필요한 모든 정보를 얻을 수 있습니다.하지만 코드를 많이 작성해야 하고 당연히 테스트, 테스트, 테스트를 해야 합니다.

[불만자] 저는 페이지 로드 시간, AJAX 타이밍 및 커스텀 트랜잭션 측정을 지원하는 atatus.com 에서 근무하고 있습니다.또한 각 리소스와 모든 리소스가 어떻게 작동하는지에 대한 세션 추적도 볼 수 있습니다.

언급URL : https://stackoverflow.com/questions/14657849/can-i-use-the-browser-navigation-timing-api-for-ajax-events-in-single-page-apps