Porównaj ceny domen i usług IT, sprzedawców z całego świata

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


Mamy aplikację jednostronicową zbudowaną z nokautem i szkieletem, która wykonuje wywołania Ajax do serwera i wykonuje złożone buforowanie danych i renderowanie DOM. Naprawdę lubimy mierzyć wydajność (i rejestrować ją z powrotem na serwerze) tak, jak widzi ją użytkownik. Wydaje się, że nie wiem, czy będzie

Nawigacja przeglądarki API
http://www.w3.org/TR/navigation-timing/
przydatne do tego, czy nie. Z tego, co widzę w przykładach, nawigacja Timing API jest powiązana z
window.performance
i jest ograniczona do ładowania strony i nie nadaje się do monitorowania zachowania Ajax. Prawda czy kłamstwo? Jeśli fałszywe, czego jeszcze mogę użyć?
Chciałbym ustawić niestandardowe punkty instrumentacji, między którymi można mierzyć czas, na przykład dla wywołania Ajax, które renderuje DOM z wynikiem serwera.
Zaproszony:
Anonimowy użytkownik

Anonimowy użytkownik

Potwierdzenie od:

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.
Anonimowy użytkownik

Anonimowy użytkownik

Potwierdzenie od:

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();
Anonimowy użytkownik

Anonimowy użytkownik

Potwierdzenie od:

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
.
Anonimowy użytkownik

Anonimowy użytkownik

Potwierdzenie od:

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ść ...
Anonimowy użytkownik

Anonimowy użytkownik

Potwierdzenie od:

Można to zrobić na dwa sposoby

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.

Aby odpowiedzieć na pytania, Zaloguj się lub Zarejestruj się