Czy mogę używać nawigacji przeglądarki Timing API dla zdarzeń Ajax w aplikacjach jednostronicowych? Jeśli nie, jakie jest dobre narzędzie?

1-poprawnie, wydajność window.performance jest powiązana z ładowaniem strony. Zobacz poniższy przykład, który to pokazuje:

<button id='searchButton'>Look up Cities</button>

 

 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>

Ponadto, nawet jeśli to zadziałało, brakowałoby danych ze starszych przeglądarek, które nie obsługują tego obiektu.
2-

Projekt Boomerang
https://github.com/lognormal/boomerang/
wydaje się być poza zakresem internetowego interfejsu API do pomiaru czasu i obsługuje również starsze przeglądarki. Jest rozmowa ze slajdami i przykładami kodu obecnego opiekuna wymienionego na

Ta konferencja
http://html5devconf.com/sessions.html... Niestety nie ma bezpośredniego połączenia.

Teraz możesz użyć

Użytkownik Timing API
http://www.w3.org/TR/user-timing/
(Zalecenie W3C z 12 grudnia 2013 r.), Które zapewnia możliwość osadzania interfejsów API wywołań w różnych częściach JavaScript, a następnie pobierania pełnych danych dotyczących czasu.
Robisz to za pomocą

mark ()

, co pozwala obliczyć, ile czasu zajęło Ci trafienie tego „znaku” w Twojej aplikacji internetowej, a następnie

measure ()

obliczyć czas, jaki upłynął między twoimi znakami.
W swoim konkretnym przypadku możesz mieć coś takiego:

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();

Wygląda na to, że istnieje heterogeniczna obsługa

window.performance.getEntries ()

, która poda szczegóły wszystkich zasobów załadowanych na stronie wraz z ich adresami URL. Używam tego interfejsu API dla żądań jsonp (nie XMLHttpRequest) w

AzurePing.info
http://azureping.info/
w przeglądarkach, które to obsługują, powrót do

new Date (). getTime ()

dla tych, które tego nie obsługują.
W chwili pisania tego tekstu IE 10 i Chrome obsługują

getEntries

, ale Firefox nie. Niestety, nie wszystkie właściwości synchronizacji są ustawione - nawet w Chrome i IE. Mogłem polegać tylko na

fetchStart

,

responseEnd

i

czasie trwania

.
Przykładowe źródło znajduje się pod adresem

GitHub
https://github.com/nzbart/Azur ... te.ts
.

Nawigacja Timing API nie jest moim zdaniem zbyt przydatna, jeśli chodzi o mierzenie wydajności aplikacji jednostronicowej.
Wraz ze wspomnianym już interfejsem użytkownika Timing API,

Zasób interfejsu API do pomiaru czasu
http://www.w3.org/TR/2014/CR-r ... 0325/
jest w rzeczywistości znacznie bardziej przydatny. Ten interfejs API zapewnia funkcjonalność, aby uzyskać czasy dla wszystkich żądań wysyłanych w sesji użytkownika (właściwie wszystko, co widzisz na kartach sieciowych narzędzi programistycznych w większości przeglądarek). Te czasy obejmują czasy podróży w obie strony, a także czasy wyszukiwania DNS itp.
Niestety jest to stosunkowo nowa specyfikacja i nie została jeszcze zaimplementowana we wszystkich przeglądarkach. Chrome i IE & > 10 dostarcza implementacji (choć jeszcze nie ukończonych). Co zaskakujące, wydaje się, że jak dotąd IE zaimplementowano większość ...

Można to zrobić na dwa sposoby

• Resource API rozrządu https://www.w3.org/TR/2014/CR- ... 0325/
• Pakowanie XMLHTTPRequest

Przyjrzyjmy się różnicom między nimi.

1. Resource Timing API
>
Przeglądarki ostatnio dodane wsparcie

Resource API rozrządu
https://www.w3.org/TR/2014/CR- ... 325/. Zasób API rozrządu zawiera głównie informacje o czasie każdego zasobu załadowanego z aplikacji. Może to być CSS, JavaScript lub AJAX. Więcej informacji możesz uzyskać listę zasobów, jak

performance.getEntriesByType('resource');

Zwróci tablicę obiektów, w której można znaleźć żądania AJAX według

initialatorType

, czyli

xmlhttprequest

. Ale są pewne ograniczenia.

• Domyślnie maksymalny rozmiar zasobu wynosi 150. Nad tablicę ma tylko maksymalnie 150 zasobów. Jeśli chcesz więcej, możesz zwiększyć rozmiar bufora jako

  Performance.SetresourceTimingBuffersize (500)

  .
• Nie otrzymasz informacji o tym, czy żądanie AJAX zakończyło się powodzeniem, czy niepowodzeniem.

2. Pakowanie XMLHTTPRequest
>
Jeśli umieścisz swoje API XMLHTTPRequest, uzyskasz wszystkie potrzebne informacje z czasu, kodu statusu i rozmiaru bajtu. Ale musisz napisać dużo kodu i oczywiście testować, testować i testować.

[Odstąpienie

od odpowiedzialności] Pracuję dla

atatus.com
https://www.atatus.com/
gdzie pomożemy Ci zmierzyć czas ładowania strony, czas AJAX i niestandardową transakcję. Ponadto można zobaczyć ślady sesji dotyczące działania wszystkich zasobów.