Come testare il codice JavaScript delle prestazioni?

Cicli CPU, utilizzo della memoria, tempo di esecuzione, ecc.?

Aggiunto: esiste un modo quantitativo di testare le prestazioni in JavaScript oltre alla percezione della velocità di esecuzione del codice?

I profiler sono sicuramente un buon modo per ottenere numeri, ma nella mia esperienza, le prestazioni percepite sono tutto ciò che conta per l'utente / cliente. Ad esempio, avevamo un progetto con una fisarmonica Ext che si espandeva per mostrare alcuni dati e poi alcune griglie Ext nidificate. Il rendering di tutto era piuttosto rapido, nessuna singola operazione ha richiesto molto tempo, c'erano solo molte informazioni che venivano rese tutte in una volta, quindi sembrava lento per l'utente.

Abbiamo risolto questo problema, non passando a un componente più veloce o ottimizzando un metodo, ma eseguendo prima il rendering dei dati, quindi il rendering delle griglie con un setTimeout. Quindi, le informazioni sono apparse per prime, quindi le griglie sarebbero state posizionate un secondo dopo. Nel complesso, ci è voluto un po 'più tempo di elaborazione per farlo in questo modo, ma per l'utente, le prestazioni percepite sono state migliorate.

In questi giorni, il profiler Chrome e altri strumenti sono universalmente disponibili e facili da utilizzare, come lo sono console.time(), console.profile()e performance.now(). Chrome ti offre anche una visualizzazione della sequenza temporale che ti mostra cosa sta uccidendo la frequenza dei fotogrammi, dove l'utente potrebbe essere in attesa, ecc.

Trovare la documentazione per tutti questi strumenti è davvero facile, per questo non è necessaria una risposta SO. 7 anni dopo, ripeterò ancora il consiglio della mia risposta originale e farò notare che è possibile eseguire il codice lento per sempre dove un utente non lo noterà, e il codice abbastanza veloce in esecuzione dove lo fanno, e si lamenteranno del il codice abbastanza veloce non è abbastanza veloce. O che la tua richiesta all'API del tuo server ha richiesto 220ms. O qualcos'altro del genere. Il punto rimane che se tiri fuori un profiler e vai in cerca di lavoro da fare, lo troverai, ma potrebbe non essere il lavoro di cui i tuoi utenti hanno bisogno.

Concordo sul fatto che la performance percepita è davvero tutto ciò che conta. Ma a volte voglio solo scoprire quale metodo di fare qualcosa è più veloce. A volte la differenza è ENORME e vale la pena conoscerla.

Potresti semplicemente usare i timer JavaScript. Ma in genere ottengo risultati molto più coerenti utilizzando i metodi devTool nativi di Chrome (ora anche in Firefox e Safari) console.time()econsole.timeEnd()

Esempio di come lo uso:

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')

Aggiornamento (4/04/2016):

Il canarino di Chrome ha recentemente aggiunto il livello di linea Profilando la scheda delle fonti degli strumenti di sviluppo che ti consente di vedere esattamente quanto tempo impiega ogni linea a eseguire!

Possiamo sempre misurare il tempo impiegato da qualsiasi funzione con un semplice oggetto data .

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

Prova jsPerf . È uno strumento di prestazioni javascript online per il benchmarking e il confronto di frammenti di codice. Io lo uso per tutto il tempo.

La maggior parte dei browser sta implementando un tempismo ad alta risoluzione in performance.now(). È superiore ai new Date()test delle prestazioni perché funziona indipendentemente dall'orologio di sistema.

uso

var start = performance.now();

// code being timed...

var duration = performance.now() - start;

Riferimenti

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

JSLitmus è uno strumento leggero per la creazione di test di benchmark JavaScript ad hoc

Esaminiamo le prestazioni tra function expressione 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>

Quello che ho fatto sopra è creare una function expressioned function constructoreseguire la stessa operazione. Il risultato è il seguente:

Risultato delle prestazioni di FireFox

Risultato delle prestazioni di IE

Alcune persone stanno suggerendo plug-in e / o browser specifici. Non lo farei perché sono davvero utili solo per quella piattaforma; un test eseguito su Firefox non si tradurrà accuratamente in IE7. Considerando che il 99,999999% dei siti ha più di un browser che li visita, è necessario controllare le prestazioni su tutte le piattaforme popolari.

Il mio suggerimento sarebbe di mantenerlo nel JS. Crea una pagina di benchmarking con tutti i tuoi test JS attivi e il tempo dell'esecuzione. Potresti anche averlo AJAX-postare i risultati a te per mantenerlo completamente automatizzato.

Quindi risciacqua e ripeti su piattaforme diverse.

Ho un piccolo strumento in cui posso eseguire rapidamente piccoli casi di prova nel browser e ottenere immediatamente i risultati:

Test di velocità JavaScript

Puoi giocare con il codice e scoprire quale tecnica è migliore nel browser testato.

Penso che il test delle prestazioni (tempo) di JavaScript sia abbastanza. Ho trovato un articolo molto utile sui test delle prestazioni JavaScript qui .

Ecco una semplice funzione che visualizza il tempo di esecuzione di una funzione passata:

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

È possibile utilizzare questo: http://getfirebug.com/js.html . Ha un profiler per JavaScript.

Risposta rapida

Su jQuery (più precisamente su Sizzle), utilizziamo questo (master checkout e open speed / index.html sul tuo browser), che a sua volta utilizza benchmark.js . Questo è usato per testare le prestazioni della libreria.

Risposta lunga

Se il lettore non conosce la differenza tra benchmark, carico di lavoro e profiler, leggi prima alcune basi sui test delle prestazioni nella sezione "readme 1st" di spec.org . Questo è per i test di sistema, ma comprendere queste basi aiuterà anche i test di JS perf. Alcuni punti salienti:

Cos'è un benchmark?

Un benchmark è "uno standard di misurazione o valutazione" (Webster's II Dictionary). Un benchmark del computer è in genere un programma per computer che esegue una serie di operazioni rigorosamente definite - un carico di lavoro - e restituisce una qualche forma di risultato - una metrica - che descrive le prestazioni del computer testato. Le metriche dei benchmark dei computer di solito misurano la velocità: quanto è stato completato il carico di lavoro; o throughput: quante unità di carico di lavoro per unità di tempo sono state completate. L'esecuzione dello stesso benchmark di computer su più computer consente di effettuare un confronto.

Devo confrontare la mia applicazione?

Idealmente, il miglior test comparativo per i sistemi sarebbe la tua applicazione con il tuo carico di lavoro. Sfortunatamente, è spesso poco pratico ottenere un'ampia base di misurazioni affidabili, ripetibili e comparabili per diversi sistemi usando la propria applicazione con il proprio carico di lavoro. I problemi potrebbero includere la generazione di un buon test, problemi di riservatezza, difficoltà a garantire condizioni comparabili, tempo, denaro o altri vincoli.

Se non la mia applicazione, allora?

Potresti prendere in considerazione l'utilizzo di benchmark standardizzati come punto di riferimento. Idealmente, un benchmark standardizzato sarà portatile e potrebbe essere già stato eseguito sulle piattaforme che ti interessano. Tuttavia, prima di considerare i risultati devi essere sicuro di aver compreso la correlazione tra le tue applicazioni / esigenze informatiche e quali il benchmark sta misurando. I benchmark sono simili ai tipi di applicazioni che esegui? I carichi di lavoro hanno caratteristiche simili? Sulla base delle tue risposte a queste domande, puoi iniziare a vedere come il benchmark può approssimare la tua realtà.

Nota: un benchmark standardizzato può fungere da punto di riferimento. Tuttavia, quando si effettua la selezione del fornitore o del prodotto, SPEC non afferma che nessun benchmark standardizzato può sostituire il benchmarking della propria applicazione effettiva.

Test delle prestazioni JS

Idealmente, il miglior test perf sarebbe usare la propria applicazione con il proprio carico di lavoro cambiando ciò che è necessario testare: diverse librerie, macchine, ecc.

Se questo non è fattibile (e di solito non lo è). Il primo passo importante: definire il carico di lavoro. Dovrebbe riflettere il carico di lavoro dell'applicazione. In questo discorso , Vyacheslav Egorov parla di carichi di lavoro di merda che dovresti evitare.

Quindi, potresti utilizzare strumenti come benchmark.js per aiutarti a raccogliere metriche, in genere velocità o velocità effettiva. Su Sizzle, siamo interessati a confrontare in che modo correzioni o modifiche influiscono sulle prestazioni sistemiche della libreria.

Se qualcosa sta andando davvero male, il tuo prossimo passo è cercare i colli di bottiglia.

Come trovo i colli di bottiglia? profilers

Qual è il modo migliore per profilare l'esecuzione di JavaScript?

Trovo che il tempo di esecuzione sia la misura migliore.

È possibile utilizzare console.profile in firebug

Di solito collaudo solo le prestazioni di JavaScript, per quanto tempo dura lo script. jQuery Lover ha fornito un buon link all'articolo per testare le prestazioni del codice javascript , ma l'articolo mostra solo come testare per quanto tempo dura il tuo codice javascript. Consiglierei anche di leggere l'articolo chiamato "5 consigli per migliorare il tuo codice jQuery mentre lavori con enormi set di dati".

Ecco una classe riutilizzabile per le prestazioni a tempo. L'esempio è incluso nel codice:

/*
     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 affronta questo problema dal punto di vista dell'utente. Raggruppa tutti gli eventi del browser, l'attività di rete ecc. Causati da alcune azioni dell'utente (clic) e prende in considerazione tutti gli aspetti quali latenza, timeout ecc.

Stavo cercando qualcosa di simile ma ho trovato questo.

https://jsbench.me/

Consente un confronto laterale e quindi è anche possibile condividere i risultati.

La regola d'oro NON è IN NESSUNA circostanza bloccare il browser dell'utente. Dopodiché, di solito guardo il tempo di esecuzione, seguito dall'uso della memoria (a meno che tu non stia facendo qualcosa di folle, nel qual caso potrebbe essere una priorità più alta).

Il test delle prestazioni è diventato una parola d'ordine negli ultimi tempi, ma ciò non significa che i test delle prestazioni non siano un processo importante nel QA o anche dopo la spedizione del prodotto. E mentre sviluppo l'app uso molti strumenti diversi, alcuni dei quali sopra menzionati come il Chrome Profiler di solito guardo un SaaS o qualcosa di open source che posso andare avanti e dimenticarmene fino a quando non ricevo quell'allerta dicendo che qualcosa è andato a monte .

Ci sono molti strumenti fantastici che ti aiuteranno a tenere d'occhio le prestazioni senza dover saltare attraverso i cerchi solo per impostare alcuni avvisi di base. Qui ci sono alcuni che penso valga la pena provare tu stesso.

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

Per provare a disegnare un'immagine più chiara, ecco un piccolo tutorial su come impostare il monitoraggio per un'applicazione di reazione.

Questo è un buon modo per raccogliere informazioni sulle prestazioni per l'operazione specifica.

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