Jak testujesz wydajność kodu JavaScript?

Cykle procesora, zużycie pamięci, czas wykonania itp.?

Dodano: Czy istnieje sposób ilościowego testowania wydajności w JavaScript poza samym postrzeganiem szybkości działania kodu?

Profile są zdecydowanie dobrym sposobem na uzyskanie liczb, ale z mojego doświadczenia wynika, że ​​postrzegana wydajność jest najważniejsza dla użytkownika / klienta. Na przykład mieliśmy projekt z akordeonem Ext, który rozwinął się, aby pokazać niektóre dane, a następnie kilka zagnieżdżonych siatek Ext. Wszystko renderowało się dość szybko, żadna pojedyncza operacja nie zajęła dużo czasu, pojawiło się tylko wiele informacji naraz, więc użytkownikowi wydawało się to powolne.

„Naprawiliśmy” to, nie przez przejście do szybszego komponentu lub optymalizację jakiejś metody, ale najpierw przez renderowanie danych, a następnie renderowanie siatek za pomocą setTimeout. Tak więc informacje pojawiły się najpierw, a następnie siatki pojawiły się na miejscu później. Ogólnie rzecz biorąc, wykonanie tego w ten sposób zajęło nieco więcej czasu, ale dla użytkownika postrzegana wydajność uległa poprawie.

Te dni, profiler Chrome i inne narzędzia są powszechnie dostępne i łatwe w obsłudze, jak to console.time(), console.profile()i performance.now(). Chrome zapewnia także widok osi czasu, który pokazuje, co zabija liczbę klatek na sekundę, gdzie może czekać użytkownik itp.

Znalezienie dokumentacji dla wszystkich tych narzędzi jest naprawdę łatwe, nie potrzebujesz na to odpowiedzi SO. 7 lat później nadal powtarzam radę z mojej pierwotnej odpowiedzi i zwracam uwagę, że możesz mieć powolne uruchamianie kodu w nieskończoność, gdy użytkownik go nie zauważy, i dość szybki kod działający tam, gdzie to robią, i będą narzekać na dość szybki kod nie jest wystarczająco szybki. Lub że twoje zapytanie do API serwera trwało 220ms. Lub coś takiego. Chodzi o to, że jeśli wyjmiesz profilera i zaczniesz szukać pracy, znajdziesz ją, ale może nie być pracą, której potrzebują Twoi użytkownicy.

Zgadzam się, że postrzegana wydajność jest naprawdę najważniejsza. Ale czasami chcę tylko dowiedzieć się, która metoda zrobienia czegoś jest szybsza. Czasami różnica jest OGROMNA i warto ją poznać.

Możesz po prostu użyć timerów javascript. Ale zazwyczaj uzyskuję znacznie bardziej spójne wyniki przy użyciu natywnego Chrome (teraz także w Firefox i Safari) metod devTool console.time()iconsole.timeEnd()

Przykład tego, jak go używam:

var iterations = 1000000;
console.time('Function #1');
for(var i = 0; i < iterations; i++ ){
    functionOne();
};
console.timeEnd('Function #1')

console.time('Function #2');
for(var i = 0; i < iterations; i++ ){
    functionTwo();
};
console.timeEnd('Function #2')

Aktualizacja (4.04.2016):

Chrome Canary niedawno dodał Profilowanie na poziomie linii w zakładce źródeł narzędzi deweloperskich, która pozwala dokładnie zobaczyć, jak długo trwała każda linia!

Zawsze możemy zmierzyć czas zajęty przez dowolną funkcję według prostego obiektu daty .

var start = +new Date();  // log start timestamp
function1();
var end =  +new Date();  // log end timestamp
var diff = end - start;

Wypróbuj jsPerf . Jest to internetowe narzędzie do wykonywania skryptów javascript do porównywania i porównywania fragmentów kodu. Używam tego cały czas.

Większość przeglądarek implementuje teraz timing w wysokiej rozdzielczości performance.now(). Jest lepszy new Date()od testowania wydajności, ponieważ działa niezależnie od zegara systemowego.

Stosowanie

var start = performance.now();

// code being timed...

var duration = performance.now() - start;

Bibliografia

• https://developer.mozilla.org/en-US/docs/Web/API/Performance.now ()
• http://www.w3.org/TR/hr-time/#dom-performance-now

JSLitmus to lekkie narzędzie do tworzenia testów porównawczych JavaScript w trybie ad-hoc

Niech zbadać wydajność między function expressioni function constructor:

<script src="JSLitmus.js"></script>
<script>

JSLitmus.test("new Function ... ", function() { 
    return new Function("for(var i=0; i<100; i++) {}"); 
});

JSLitmus.test("function() ...", function() { 
       return (function() { for(var i=0; i<100; i++) {}  });
});

</script>

To, co zrobiłem powyżej, to utworzenie function expressioni function constructorwykonanie tej samej operacji. Wynik jest następujący:

Wynik wydajności FireFox

Wynik wydajności IE

Niektóre osoby sugerują określone wtyczki i / lub przeglądarki. Nie zrobiłbym tego, ponieważ są naprawdę przydatne tylko dla tej jednej platformy; uruchomienie testowe w przeglądarce Firefox nie przełoży się dokładnie na IE7. Biorąc pod uwagę, że 99,999999% witryn odwiedza je więcej niż jedna przeglądarka, musisz sprawdzić wydajność na wszystkich popularnych platformach.

Moją sugestią byłoby pozostawienie tego w JS. Utwórz stronę testową ze wszystkimi testami JS i wykonuj je w określonym czasie. Możesz nawet poprosić, aby AJAX opublikował wyniki z powrotem do Ciebie, aby zachować pełną automatyzację.

Następnie spłucz i powtórz na różnych platformach.

Mam małe narzędzie, w którym mogę szybko uruchomić małe przypadki testowe w przeglądarce i natychmiast uzyskać wyniki:

Test prędkości JavaScript

Możesz grać z kodem i dowiedzieć się, która technika jest lepsza w testowanej przeglądarce.

Myślę, że testowanie wydajności (czasu) JavaScript jest wystarczające. Znalazłem tutaj bardzo przydatny artykuł na temat testowania wydajności JavaScript .

Oto prosta funkcja, która wyświetla czas wykonania przekazanej funkcji:

var perf = function(testName, fn) {
    var startTime = new Date().getTime();
    fn();
    var endTime = new Date().getTime();
    console.log(testName + ": " + (endTime - startTime) + "ms");
}

Możesz użyć tego: http://getfirebug.com/js.html . Posiada profiler do JavaScript.

Szybka odpowiedź

W jQuery (a dokładniej w Sizzle) używamy tego (główny kontroler i open speed / index.html w przeglądarce), który z kolei używa benchmark.js . Służy do testowania wydajności biblioteki.

Długa odpowiedź

Jeśli czytelnik nie zna różnicy między testem porównawczym, obciążeniem a profilerami, najpierw przeczytaj podstawy do testowania wydajności w sekcji „readme 1st” spec.org . Jest to przeznaczone do testowania systemu, ale zrozumienie tych podstaw pomoże również w testowaniu JS perf. Niektóre najważniejsze:

Co to jest punkt odniesienia?

Punktem odniesienia jest „standard pomiaru lub oceny” (Słownik Webstera II). Test komputerowy to zwykle program komputerowy, który wykonuje ściśle określony zestaw operacji - obciążenie pracą - i zwraca pewną formę wyniku - metrykę - opisującą działanie testowanego komputera. Komputerowe wskaźniki porównawcze zwykle mierzą szybkość: jak szybko ukończono obciążenie pracą; lub przepustowość: ile jednostek obciążenia na jednostkę czasu zostało ukończonych. Uruchomienie tego samego testu porównawczego na wielu komputerach pozwala na porównanie.

Czy powinienem przeprowadzić analizę porównawczą własnej aplikacji?

Najlepiej byłoby, gdyby najlepszym testem porównawczym dla systemów była twoja aplikacja z własnym obciążeniem. Niestety często niepraktyczne jest uzyskanie szerokiej bazy wiarygodnych, powtarzalnych i porównywalnych pomiarów dla różnych systemów korzystających z własnej aplikacji i własnego obciążenia pracą. Problemy mogą obejmować wygenerowanie dobrego przypadku testowego, obawy związane z poufnością, trudności w zapewnieniu porównywalnych warunków, czasu, pieniędzy lub inne ograniczenia.

Jeśli nie moja własna aplikacja, to co?

Możesz rozważyć użycie standardowych punktów odniesienia jako punktu odniesienia. Idealnie byłoby, gdyby znormalizowany test porównawczy był przenośny i mógł być już uruchomiony na platformach, które Cię interesują. Zanim jednak rozważysz wyniki, musisz upewnić się, że rozumiesz korelację między potrzebami aplikacji / komputera a tym, co Benchmark mierzy. Czy testy porównawcze są podobne do rodzajów uruchomionych aplikacji? Czy obciążenia mają podobne cechy? Na podstawie odpowiedzi na te pytania możesz zacząć sprawdzać, jak test porównawczy może przybliżyć twoją rzeczywistość.

Uwaga: Standaryzowany test porównawczy może służyć jako punkt odniesienia. Niemniej jednak, gdy dokonujesz wyboru dostawcy lub produktu, SPEC nie twierdzi, że jakikolwiek znormalizowany test porównawczy może zastąpić testowanie własne aplikacji.

Testy wydajności JS

Najlepiej byłoby, gdyby najlepszym testem wydajności byłaby własna aplikacja z własnym przełączaniem obciążenia, co trzeba przetestować: różne biblioteki, maszyny itp.

Jeśli nie jest to możliwe (i zwykle nie jest). Pierwszy ważny krok: zdefiniuj obciążenie pracą. Powinien odzwierciedlać obciążenie aplikacji. W tej rozmowie Wiaczesław Egorow mówi o gównianych obciążeniach, których należy unikać.

Następnie możesz użyć narzędzi takich jak benchmark.js, aby pomóc w zbieraniu danych, zwykle prędkości lub przepustowości. W Sizzle interesuje nas porównanie, w jaki sposób poprawki lub zmiany wpływają na wydajność systemową biblioteki.

Jeśli coś działa naprawdę źle, następnym krokiem jest poszukiwanie wąskich gardeł.

Jak znaleźć wąskie gardła? Profile

Jaki jest najlepszy sposób na profilowanie wykonywania javascript?

Czas realizacji wydaje mi się najlepszym miernikiem.

Możesz użyć console.profile w Firebug

Zwykle testuję wydajność javascript, jak długo skrypt działa. jQuery Lover podał dobry link do artykułu do testowania wydajności kodu javascript , ale artykuł pokazuje tylko, jak sprawdzić, jak długo działa kod javascript. Poleciłbym również przeczytanie artykułu zatytułowanego „5 porad dotyczących ulepszania kodu jQuery podczas pracy z dużymi zestawami danych”.

Oto klasa wielokrotnego użytku dla wydajności czasu. Przykład jest zawarty w kodzie:

/*
     Help track time lapse - tells you the time difference between each "check()" and since the "start()"

 */
var TimeCapture = function () {
    var start = new Date().getTime();
    var last = start;
    var now = start;
    this.start = function () {
        start = new Date().getTime();
    };
    this.check = function (message) {
        now = (new Date().getTime());
        console.log(message, 'START:', now - start, 'LAST:', now - last);
        last = now;
    };
};

//Example:
var time = new TimeCapture();
//begin tracking time
time.start();
//...do stuff
time.check('say something here')//look at your console for output
//..do more stuff
time.check('say something else')//look at your console for output
//..do more stuff
time.check('say something else one more time')//look at your console for output

UX Profiler podchodzi do tego problemu z perspektywy użytkownika. Grupuje wszystkie zdarzenia przeglądarki, aktywność sieciową itp. Spowodowane przez niektóre działania użytkownika (kliknięcie) i bierze pod uwagę wszystkie aspekty, takie jak opóźnienie, przekroczenia czasu itp.

Szukałem czegoś podobnego, ale znalazłem to.

https://jsbench.me/

Umożliwia porównanie między stronami, a następnie można również udostępniać wyniki.

Złotą zasadą jest, aby w żadnym wypadku NIE blokować przeglądarki użytkownika. Potem zwykle patrzę na czas wykonania, a następnie użycie pamięci (chyba że robisz coś szalonego, w którym to przypadku może to mieć wyższy priorytet).

Testy wydajności stały się ostatnio modnym hasłem, ale nie oznacza to, że testowanie wydajności nie jest ważnym procesem w kontroli jakości ani nawet po wysłaniu produktu. I podczas opracowywania aplikacji używam wielu różnych narzędzi, niektóre z nich wspomniane powyżej, takie jak chromowany Profiler , zwykle patrzę na SaaS lub coś innego, co mogę uruchomić i zapominam o tym, dopóki nie otrzymam tego powiadomienia, że ​​coś poszło nie tak .

Istnieje wiele niesamowitych narzędzi, które pomogą ci kontrolować wydajność bez konieczności przeskakiwania przez obręcze tylko w celu skonfigurowania podstawowych alertów. Oto kilka, które moim zdaniem warto sprawdzić.

1. Sematext.com
2. Datadog.com
3. Uptime.com
4. Smartbear.com
5. Solarwinds.com

Aby spróbować namalować wyraźniejszy obraz, oto mały samouczek dotyczący konfigurowania monitorowania dla aplikacji reagującej.

Jest to dobry sposób na zebranie informacji o wydajności dla konkretnej operacji.

start = new Date().getTime(); 
for (var n = 0; n < maxCount; n++) {
/* perform the operation to be measured *//
}
elapsed = new Date().getTime() - start;
assert(true,"Measured time: " + elapsed);