Come misurare l'esecuzione dello script e * l'analisi * del tempo?

Question

Per quanto ne so, gli script vengono scaricati ed eseguiti in modo sincrono in javascript. Quindi se scriviamo il seguente codice:

<script type='text/javascript'>console.time('core')</script> 
<script type='text/javascript' src="guicore.js"></script> 
<script type='text/javascript'>console.timeEnd('core')</script> 

vedremo in consolle tempo totale per il download, analizzare e eseguire js. Come possiamo escludere il tempo di analisi? Basta aggiungere un file simile, ma con tutto il codice commentato. Più o meno, questa tecnica dovrebbe funzionare.

Il problema è questo non funziona =)

ho ottimizzato quel codice, ridurre il tempo di esecuzione da 90ms a 25ms, ma vedere contempo ~ 100 ± 10ms per Chrome e ~ 160 ± 15ms per Firefox .

Ok, so che potrei usare profiler, ma la domanda è: "come misurare js tempo di parsing correttamente" e cosa ho misurato btw. Research.reverse-engineering è molto divertente, ma forse c'è qualcuno che conosce a fondo quel campo.

Answer 1

Apri Chrome e apri gli strumenti per sviluppatori, vai alla scheda "Cronologia". Se si preme il pulsante di registrazione (cerchio pieno, in basso a sinistra), quindi ricaricare la pagina, si otterrà una linea temporale abbastanza dettagliata, suddivisa in tipi specifici di attività (Invia richiesta, Analizza, Valuta), programmata al microsecondo.

Answer 2

So che questa è una specie di vecchia domanda, ma l'ho trovata mentre cercavo una soluzione a questo me stesso. Puoi usare gli strumenti di sviluppo nel browser che hai scelto per guardare questo, ma se vuoi farlo in codice questo è il metodo che ho usato.

La funzione scriptLoadParseDuration di seguito prenderà un URL in un file .js, lo inserirà in un elemento <script> e registrerà la durata di caricamento/analisi sulla console.

Ricordare che questo eseguirà il <script> che si sta profilando all'interno del contesto DOM corrente. Quindi nell'esempio seguente: jQuery è ancora accessibile nell'ambito globale anche se lo script è stato rimosso. Lo script potrebbe essere esteso per fare tutto questo in un per isolarlo però.

function scriptLoadParseDuration(url) { 
 
    var start; 
 
    var script = document.createElement('script'); 
 
    
 
    // <script> must be attached to the document to actually load the file 
 
    document.querySelector('html').appendChild(script); 
 
    
 
    // Calculate load/parse duration once script has loaded 
 
    script.addEventListener('load', function scriptLoad() { 
 
    // Calculate load/parse duration 
 
    console.log('Duration: ' + (Date.now() - start) + 'ms'); 
 
    
 
    // Remove <script> from document 
 
    script.parentElement.removeChild(script); 
 
    }, false); 
 
    
 
    // Get current time in milliseconds 
 
    start = Date.now(); 
 
    
 
    // Setting the `src` starts the loading. Math.random is used to make sure it is an uncached request 
 
    script.src = url + '?' + Math.floor(Math.random() * 9e9); 
 
} 
 

 
var url = 'https://code.jquery.com/jquery-3.0.0.min.js'; 
 

 
scriptLoadParseDuration(url);

Ecco un esempio dimostrando che jQuery è ancora nell'ambito globale dopo la rimozione <script>.

function scriptLoadParseDuration(url) { 
 
    var start; 
 
    var script = document.createElement('script'); 
 
    
 
    console.log('`jQuery` before attaching: ' + typeof jQuery); 
 
    
 
    // <script> must be attached to the document to actually load the file 
 
    document.querySelector('html').appendChild(script); 
 
    
 
    // Calculate load/parse duration once script has loaded 
 
    script.addEventListener('load', function scriptLoad() { 
 
    // Calculate load/parse duration 
 
    console.log('Duration: ' + (Date.now() - start) + 'ms'); 
 

 
    console.log('`jQuery` once attached: ' + typeof jQuery); 
 
    // Remove <script> from document 
 
    script.parentElement.removeChild(script); 
 
    console.log('`jQuery` after detach: ' + typeof jQuery); 
 
    }, false); 
 
    
 
    // Get current time in milliseconds 
 
    start = Date.now(); 
 
    
 
    // Setting the `src` starts the loading. Math.random is used to make sure it is an uncached request 
 
    script.src = url + '?' + Math.floor(Math.random() * 9e9); 
 
} 
 

 
var url = 'https://code.jquery.com/jquery-3.0.0.min.js'; 
 

 
scriptLoadParseDuration(url);

Answer 3

Molto vecchia questione con un relativamente nuova risposta.

Date.now() restituisce un timestamp con precisione millisecondo. Per un'applicazione da eseguire a 60 FPS, è necessario aggiornare il frame ogni 16 ms. Il nostro misuratore del millisecondo potrebbe non essere abbastanza preciso.

Introducendo il Performace API nei moderni browser JS, questo consente di creare timestamp a virgola mobile con precisione al microsecondo.

Invece di Date.now() utilizzare window.performance.now() per le misurazioni, c'è una buona guida sull'uso di Performance API on HTML5Rocks.