2009-07-31 6 views
10

Desidero calcolare il tempo di caricamento della pagina; Ciò significa che dal secondo 0 (un piccolo frammento jquery è stato caricato) al secondo x, quando viene caricata l'intera pagina.con Jquery

mi chiedo se qualcuno ha avuto un'esperienza con esso, anche le idee su come implementarlo correttamente saranno apperciated.

favore, non ho bisogno di una proroga, ho già Firebug, ho bisogno di una soluzione di js

grazie :)

risposta

21

Come altri hanno già detto, questo non sarà terribilmente accurato. Ma questo dovrebbe funzionare in modo ragionevole.

Nella tua <head>, vale a dire, il più presto possibile:

<script> 
    var startTime = (new Date()).getTime(); 
</script> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> 
<script> 
    $(window).load(function() { 
     var endTime = (new Date()).getTime(); 
     var millisecondsLoading = endTime - startTime; 
     // Put millisecondsLoading in a hidden form field 
     // or Ajax it back to the server or whatever. 
    }); 
</script> 

La chiave è questo comportamento, from the jQuery docs:

Quando è legato al elemento della finestra, viene generato l'evento quando l'utente L'agente termina il caricamento di tutto il contenuto all'interno di un documento , inclusi finestra, frame, oggetti e immagini.

+0

aggiungerai mike houston tip aggiungendo la prima riga di javascript nella "testa", questo aumenterà la precisione –

+0

Oh buon punto Ho appena capito che stavo assumendo jQuery è stato caricato per primo, mentre in realtà dovrebbe essere caricato tra i due frammenti di codice. – Domenic

0

potreste essere meglio utilizzare un plugin per browser? Calcolando con JavaScript sarà necessario sottovalutare il tempo di caricamento della pagina, poiché non includerà il tempo di caricamento dello snippet jQuery e non includerà l'intervallo di tempo tra il browser che invia la richiesta e il server web che risponde?

C'è un plugin Load Time Analyzer per Firefox.

+0

no lo voglio per ogni browser; questo è perché sarò in grado di raccogliere tutti i carichi di tempo e fare analisi con loro più tardi –

0

Se si esegue questa operazione a scopo di ottimizzazione, suggerisco di utilizzare Yslow. È un'estensione Firebug-Firefox. Può mostrare il tempo di caricamento della pagina e molte altre informazioni utili.

-2

Non è possibile eseguire questa operazione con jQuery dal $(document).ready(); quando la pagina è stata caricata.

È possibile eseguire questa operazione con il plug-in YSlowFirebug per Firfox. Se si desidera che funzioni su tutti i browser, sarà necessario aggiungere il codice serveride per mostrare quanto tempo è trascorso quando il primo elemento è stato scritto nell'elemento inferiore.

Se questo non è ciò che si desidera, è possibile utilizzare uno strumento come Selenium e scrivere un test per acquisire l'ora da open alla fine di waitForPageToLoad. Il selenio funziona su tutti i browser

+0

molto intensivo, cercando qualcosa di facile e semplice, lo esplorerò anche se –

+0

non è affatto intenso, ma lo uso da anni. Ci sono alcuni tutorial sul selenio su http://www.theautomatedtester.co.uk/selenium_training.htm – AutomatedTester

+0

tutto ciò di cui ho bisogno sono poche righe, un quadro completo non è molto produttivo se hai un obiettivo molto piccolo; cosa c'è di meglio di scrivere 3 linee di Javascript o 1 riga in Jquery? –

1

Dal script vengono eseguiti non appena vengono analizzati, vi suggerisco di mettere un tag script appena dentro l'intestazione, quindi lo script per associare l'evento di caricamento della pagina dopo aver caricato jQuery:

<html> 
<head> 
    <script> 
     // Capture start time 
    </script> 
    ... 
    <script src="jquery.js" /> 
    <script> 
     $(window).load(function() { 
     // Capture end time 
     }); 
    </script> 
... 

In questo modo si dovrebbe essere in grado di catturare il più possibile il tempo di caricamento della pagina.

0

Leggi il W3C recommendation for Navigation Timing

Notevole:

Ad esempio, il seguente script mostra un tentativo ingenuo per misurare il tempo necessario per caricare completamente una pagina:

<html> 
<head> 
<script type="text/javascript"> 

var start = new Date().getTime(); 
function onLoad() { 
    var now = new Date().getTime(); 
    var latency = now - start; 
    alert("page loading time: " + latency); 
} 

</script> 
</head> 
<body onload="onLoad()"> 
<!- Main page body goes from here. --> 
</body> 
</html> 

Lo script calcola il tempo necessario per caricare la pagina a il primo bit di JavaScript in testa viene eseguito, , ma non fornisce a alcuna informazione sul tempo necessario per ottenere la pagina dal server .

Per soddisfare la necessità di informazioni complete sull'esperienza utente, questo documento introduce le interfacce PerformanceTiming. Questa interfaccia consente ai meccanismi JavaScript di fornire misurazioni complete della latenza lato client all'interno delle applicazioni. Con l'interfaccia proposta, l'esempio precedente può essere modificato per misurare il tempo di caricamento della pagina percepita dall'utente .

Il seguente script calcola quanto tempo è necessario caricare una pagina dalla navigazione più recente di .

<html> 
<head> 
<script type="text/javascript"> 
function onLoad() { 
    var now = new Date().getTime(); 
    var page_load_time = now - performance.timing.navigationStart; 
    alert("User-perceived page loading time: " + page_load_time); 
} 

</script> 
</head> 
<body onload="onLoad()"> 
<!- Main page body goes from here. --> 
</body> 
</html>