2010-03-25 10 views
6

Lavoro su un sistema aziendale interno che dispone di un front-end Web che utilizza Tomcat.Come posso monitorare il tempo di rendering in un browser?

  1. Come è possibile monitorare il tempo di rendering di pagine specifiche in un browser (IE6)?
  2. Vorrei poter registrare i risultati in un file di registro (file di registro separato o registro di accesso Tomcat).

MODIFICA: Idealmente, ho bisogno di monitorare il rendering sui client che accedono alle pagine.

+0

Sai "Fiddler" (https://www.fiddler2.com/fiddler2/version.asp)? – XpiritO

+0

Fiddler può misurare il tempo necessario per la richiesta di esecuzione e il trasferimento al client, ma se il sito è javascript pesante o grande, ci sarà un ritardo in più mentre il browser elabora il DOM e javascript. Questo è particolarmente vero per IE6. – driis

+1

"Fiddler non necessario": D – adpd

risposta

6

Nel caso in cui un browser abbia abilitato JavaScript, una delle cose che potresti fare è scrivere uno script inline e inviarlo come prima cosa nel tuo HTML. Lo script farebbe due cose:

  1. Registra l'ora corrente del sistema in una variabile JS (se sei fortunato, il tempo potrebbe approssimativamente corrispondere all'ora di inizio del rendering della pagina).
  2. Collegare la funzione JS alla pagina evento onLoad. Questa funzione interrogherà nuovamente l'ora corrente del sistema, sottraendo l'ora di inizio dal passaggio 1 e inviandola al server insieme al percorso della pagina (o qualche ID univoco che è possibile inserire nello script inline dinamicamente sul server).
<script language="JavaScript"> 
var renderStart = new Date().getTime(); 
window.onload=function() { 
    var elapsed = new Date().getTime()-renderStart; 
    // send the info to the server 
    alert('Rendered in ' + elapsed + 'ms'); 
} 

</script> 

... usual HTML starts here ... 

Avresti bisogno di fare in modo che la pagina non ignorare onload più avanti nel codice, ma si aggiunge alla lista dei gestori di eventi, invece.

+0

+1 - Questo suona come il tipo di cosa che ho attualmente in mente. Buono per avere la conferma di quella linea di pensiero. Qualcuno pensa che questo sia l'approccio sbagliato? – adpd

+6

Questo è ormai obsoleto. Era il meglio che potevi fare nel 2010, ma nel 2012 la maggior parte dei browser supporta le specifiche del Timer delle prestazioni del W3C e questo è un modo molto migliore per ottenere queste informazioni. – Ian

+0

Questo non funziona. Misura il tempo fino a quando tutto è caricato, ma non renderizzato. Prova a generare un SVG di grandi dimensioni. L'evento 'onload' si attiva quando è nota la dimensione dell'immagine SVG, ma l'utente potrebbe non vedere l'immagine per un po 'di tempo prima di renderla. –

0

Per quanto riguarda le tecniche non invasive, le misure Hammerhead misurano il tempo di caricamento completo (inclusa l'esecuzione JavaScript), anche se solo in Firefox.

Ho visto risultati utilizzabili quando uno snippet di codice JavaScript può essere aggiunto a livello globale per misurare l'inizio e la fine di ogni operazione di caricamento della pagina.

0

Dai un'occhiata a Selenium - offrono un telecomando che può avviare automaticamente diversi browser (ad es. IE6), caricare pagine, verificare contenuti specifici nella pagina. Alla fine vengono generati report che mostrano anche i tempi di rendering.

0

Poiché altri postano risposte che utilizzano altri browser, credo lo farò anche io. Chrome ha un sistema di profilazione molto dettagliato che suddivide il tempo di rendering della pagina e mostra il tempo impiegato per ogni passo lungo la strada.

Per quanto riguarda IE, è possibile prendere in considerazione la possibilità di scrivere un plug-in. Sembra che ci siano pochi strumenti come questo sul mercato. Forse potresti venderlo.

+0

Sono d'accordo con (anche) "pochi strumenti" sul mercato per IE. Scrivere un plug-in potrebbe non essere una cattiva idea. Potrei dare un'occhiata a quello. Grazie per il suggerimento su Chrome, ma le macchine client devono eseguire IE6 per il momento in cui si tratta di criteri IT aziendali. Quando arriva un aggiornamento, sarà sicuramente IE7 o IE8. Se solo avessi il lusso di altri browser ... – adpd

0

Su Firefox è possibile utilizzare Firebug per monitorare il tempo di caricamento. Con il plugin YSlow puoi anche ottenere consigli su come migliorare le prestazioni.

7

Il Navigation Timing API è disponibile nei moderni browser (Internet Explorer 9 +) ad eccezione di Safari:

function onLoad() { 
    var now = new Date().getTime(); 
    var page_load_time = now - performance.timing.navigationStart; 
    console.log("User-perceived page loading time: " + page_load_time); 
} 
Problemi correlati