tempo di caricamento della pagina con Jquery

StackOverflow https://stackoverflow.com/questions/1211414

Domanda

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

Mi chiedo se qualcuno ha avuto esperienza con esso, anche le idee su come implementarlo correttamente saranno apprezzate.

per favore non ho bisogno di un'estensione, ho già firebug, ho bisogno di una soluzione js

grazie :)

È stato utile?

Soluzione

Come altri hanno già detto, questo non sarà tremendamente accurato. Ma questo dovrebbe funzionare ragionevolmente.

Nel tuo <head>, ovvero il prima 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, dai documenti jQuery :

  

Se associato all'elemento finestra, il   l'evento viene generato quando l'agente utente   termina il caricamento di tutto il contenuto in a   documento, compresi finestra, cornici,   oggetti e immagini.

Altri suggerimenti

Poiché gli script vengono eseguiti non appena vengono analizzati, ti suggerisco di inserire un tag di script all'interno dell'intestazione, quindi lo script per agganciare 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 dovresti essere in grado di catturare il maggior tempo possibile di caricamento della pagina.

Potresti stare meglio usando un plug-in del browser? Il calcolo con JavaScript dovrà sottostimare il tempo di caricamento della pagina, poiché non includerà il tempo per caricare lo snippet jQuery e non includerà il tempo tra il browser che invia la richiesta e il server web che risponde?

Esiste un plug-in Load Time Analyzer per Firefox.

Se lo stai facendo a scopo di ottimizzazione, ti suggerisco di utilizzare Yslow . È un'estensione Firebug-Firefox. Può mostrare il tempo di caricamento della pagina e molte altre informazioni utili.

Leggi la raccomandazione del W3C per i tempi di navigazione

Da notare:

  

Ad esempio, il seguente script mostra un ingenuo tentativo di misurare il   tempo impiegato 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 impiegato per caricare la pagina dopo il   il primo bit di JavaScript nella testa viene eseguito, ma non lo dà   qualsiasi informazione sul tempo necessario per ottenere la pagina dal   server.

     

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

     

Il seguente script calcola quanto tempo per caricare una pagina dal   navigazione più recente. 

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

Non puoi davvero farlo con jQuery poiché $(document).ready(); si attiva quando la pagina è stata caricata.

Puoi farlo con YSlow plug-in Firebug per Firfox. Se vuoi che funzioni su tutti i browser dovrai aggiungere il codice sul lato server per mostrare quanto tempo ci è voluto quando il primo elemento è stato scritto nell'elemento inferiore.

Se non è quello che desideri, puoi utilizzare uno strumento come Selenium e scrivere un test per acquisire tempo da open alla fine di waitForPageToLoad. Selenium funziona su tutti i browser

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top