Esiste un modo definitivo per misurare il “tempo di dipingere” per le prestazioni?

Sto testando vari miglioramenti delle prestazioni per un sito web di grandi dimensioni, e ho bisogno di quantificare quanto tempo ci vuole dal caricamento iniziale agli elementi del documento che appaiono (cioè il tempo di dipingere). C’è un buon modo per farlo usando il dev del profiler di Chrome?

Per chiarire, ho bisogno di sapere il tempo totale dal caricamento alla pagina dipinta.

Potresti fare una delle due cose: 1) Usa il metodo di Dan Mayor. Puoi semplicemente utilizzare il new Date().getTime prima e dopo lo script di disegno e sottrarli per scoprire quanto tempo è stato necessario per completare lo script. Tuttavia, questo può essere sobject a lag se l’intero codice ritarda. Non è necessariamente il modo più preciso, ma fa il lavoro. (Tuttavia, è ansible creare una funzione separata che calcola l’ora indipendentemente dall’altro script. Vedere di seguito 🙂

 function findTime(done){ if (done==false){var time1 = new Date.getTime();} if (done==true) {var time2 = new Date.getTime(); window.alert(time2-time1);} } 

Dove è done un parametro booleano che dovresti aggiungere dopo che lo script è stato completato.

2) Chrome ha una bella console per sviluppatori con funzionalità di timeline. In pratica, apri il browser Chrome e premi il comando + Maiusc + C (control + shift + C per windows) e fai clic sul pulsante Timeline. Quindi, fai clic sul piccolo punto nella parte inferiore della console e dovrebbe diventare rosso. Aggiorna la pagina e la sequenza temporale inizierà a raccogliere tutti i tipi di dati temporali per i tuoi script. Gli eventi di pittura sono mostrati in verde. Sfortunatamente, questa è una soluzione di terze parti.

Alla fine, non c’è modo di misurare direttamente questo tempo, a causa di diverse quantità di lag, diverse velocità di connessione a Internet, velocità del processore, ecc. Tuttavia, questi 2 metodi sono molto simili alla risposta reale. Si consiglia di testare gli script su diversi browser e computer.

Per i principianti, mi familiarizzerei sicuramente con il “Pannello di rete” in Firebug:

Ho appreso che Chrome ha uno strumento simile: premi “F12” (o usa l’icona “chiave inglese”):

Potresti voler esaminare l’evento “DOMContentLoaded”, questo è ciò a cui jQuery si lega per fornire il suo metodo .ready (). L’idea di base è che vorrete usare Date.getTime () per registrare valori in millisecondi, il primo dovrebbe essere l’ultima riga del vostro documento (per il marcatore html scaricato). Il secondo che si desidera chiamare dopo onload, DOMContentLoaded, caricato e altri eventi di stato pronti per DOM.

Esempio rapido (fine dell’output HTML):

  

In questo esempio window.downloadComplete sarà il millisecondo quando il DOM ha finito di scaricare, window.domParseComplete è il millisecondo quando il DOM è stato analizzato e window.renderComplete è il millisecondo quando la finestra segnala che il rendering è completo. Window.paintTime è solo il numero di millisecondi calcolato da questi millisecondi.