Berechnen der Seitenladezeit in JavaScript
Ich versuche eine Webseite zu erstellen, die beim Laden ein Intervall verwendet, um einen Timer zu starten.
Wenn die Seite vollständig geladen ist, stoppt sie den Timer.
aber in 99% der Fälle erhalte ich Zeitmessungen von 0,00 oder 0,01, auch wenn es länger dauert.
Gelegentlich steht etwas, das manchmal sinnvoller ist als .28 oder 3.10.
Hier ist der Code, wenn es hilft:
var hundredthstimer = 0;
var secondplace = 0;
function addinc(){
hundredthstimer += 1;
if (inctimer == 100){
hundredthstimer = 0;
secondplace += 1;
}
}
var clockint = setInterval(addinc, 10);
function init(){
var bconv1 = document.getElementById("bconverter1");
var bconv2 = document.getElementById("bconverter2");
$(bconv2).hide();
clearInterval(clockint);
if (inctimer.len !== 2){
inctimer = "0" + inctimer;
}
alert(secondplace + "." + inctimer);
}
onload = init;
Es wird also im Grunde eine Variable namens Hundertstel erstellt, die alle 10 Millisekunden (0,01 Sekunden) um '1' erhöht wird.
Wenn diese Zahl dann 1000 (1 volle Sekunde) erreicht, wird eine Variable mit der Bezeichnung secondsplace um 1 erhöht, da dies die Anzahl der vollen Sekunden ist, für die sie ausgeführt wurde.
Anschließend werden der zweite Platz, ein Dezimalpunkt und der hundertste Platz als Gesamtladezeit gemeldet.
Das obige Problem mit falschen Nummern besteht jedoch weiterhin. Warum?
Verwenden Sie niemals die Funktionen setInterval oder setTimeout zur Zeitmessung! Sie sind unzuverlässig und es ist sehr wahrscheinlich, dass sich die JS-Ausführungsplanung während des Parsens und Anzeigens von Dokumenten verzögert.
Verwenden Sie stattdessen das Date -Objekt , um einen Zeitstempel zu erstellen, als Sie mit dem Laden der Seite begannen, und die Differenz zu der Zeit zu berechnen, zu der die Seite vollständig geladen wurde:
<doctype html>
<html>
<head>
<script type="text/javascript">
var timerStart = Date.now();
</script>
<!-- do all the stuff you need to do -->
</head>
<body>
<!-- put everything you need in here -->
<script type="text/javascript">
$(document).ready(function() {
console.log("Time until DOMready: ", Date.now()-timerStart);
});
$(window).load(function() {
console.log("Time until everything loaded: ", Date.now()-timerStart);
});
</script>
</body>
</html>
Warum so kompliziert? Wann können Sie tun:
var loadTime = window.performance.timing.domContentLoadedEventEnd- window.performance.timing.navigationStart;
Wenn Sie mehrmals benötigen, überprüfen Sie das window.performance-Objekt:
console.log(window.performance);
Zeigt Ihnen das Timing-Objekt:
connectEnd Time when server connection is finished.
connectStart Time just before server connection begins.
domComplete Time just before document readiness completes.
domContentLoadedEventEnd Time after DOMContentLoaded event completes.
domContentLoadedEventStart Time just before DOMContentLoaded starts.
domInteractive Time just before readiness set to interactive.
domLoading Time just before readiness set to loading.
domainLookupEnd Time after domain name lookup.
domainLookupStart Time just before domain name lookup.
fetchStart Time when the resource starts being fetched.
loadEventEnd Time when the load event is complete.
loadEventStart Time just before the load event is fired.
navigationStart Time after the previous document begins unload.
redirectCount Number of redirects since the last non-redirect.
redirectEnd Time after last redirect response ends.
redirectStart Time of fetch that initiated a redirect.
requestStart Time just before a server request.
responseEnd Time after the end of a response or connection.
responseStart Time just before the start of a response.
timing Reference to a performance timing object.
navigation Reference to performance navigation object.
performance Reference to performance object for a window.
type Type of the last non-redirect navigation event.
unloadEventEnd Time after the previous document is unloaded.
unloadEventStart Time just before the unload event is fired.
Die Antwort von @HaNdTriX ist großartig, aber wir sind uns nicht sicher, ob DOM im folgenden Code vollständig geladen ist:
var loadTime = window.performance.timing.domContentLoadedEventEnd- window.performance.timing.navigationStart;
Dies funktioniert perfekt, wenn es mit Onload verwendet wird als:
window.onload = function () {
var loadTime = window.performance.timing.domContentLoadedEventEnd-window.performance.timing.navigationStart;
console.log('Page load time is '+ loadTime);
}
Edit 1: Es wurde ein Kontext hinzugefügt, um zu antworten
Hinweis:loadTime wird in Millisekunden angegeben. Sie können durch 1000 dividieren, um die von @nycynik angegebenen Sekunden zu erhalten
Es ist schwierig, ein gutes Timing zu finden, weil die performance.dominteractive ist falsch berechnet (auf jeden Fall ein interessanter Link für Timing-Entwickler).
Wenn dom geparst wird, kann es weiterhin verzögerte Skripte laden und ausführen. Und Inline-Skripte, die auf css warten (css blocking dom), müssen ebenfalls geladen werden, bis DOMContentloaded . Also ist es noch nicht analysiert?
Und wir haben readystatechange ein Ereignis, bei dem wir uns readyState ansehen können. Leider fehlt "dom is parsed", was irgendwo zwischen "loaded" und "interactive" passiert.
Alles wird problematisch, auch wenn uns die Timing-API nicht die Zeit gibt, in der dom das Parsen von HTML beendet und den Prozess The End gestartet hat. Dieser Standard besagt, dass der erste Punkt sein muss, dass "interaktiv" genau nach dem Parsen von dom ausgelöst wird! Sowohl Chrome als auch FF haben es implementiert, wenn Dokument beendet ist Laden irgendwann danach Sie scheinen die Standards (falsch) zu interpretieren, da das Parsen über die verzögerten Skripten hinaus fortgesetzt wird, die ausgeführt werden, während DOMContentLoaded vor der verzögerten Ausführung als etwas Hapen interpretiert wird und nicht danach.
Meine Empfehlung für Sie lautet: Navigation Timing API . Oder gehen Sie den einfachen Weg und wählen Sie einen Oneliner aus, oder führen Sie alle drei aus und schauen Sie in der Konsole Ihres Browsers nach ...
document.addEventListener('readystatechange', function() { console.log("Fiered '" + document.readyState + "' after " + performance.now() + " ms"); });
document.addEventListener('DOMContentLoaded', function() { console.log("Fiered DOMContentLoaded after " + performance.now() + " ms"); }, false);
window.addEventListener('load', function() { console.log("Fiered load after " + performance.now() + " ms"); }, false);
Die Zeit ist in Millisekunden, nachdem das Dokument gestartet wurde. Ich habe mit Navigation Timing API verifiziert.
Um zum Beispiel Sekunden von dem Zeitpunkt an zu erhalten, an dem Sie var ti = performance.now() ausgeführt haben, können Sie parseInt(performance.now() - ti) / 1000 ausführen.
Anstelle dieser Art von performance.now () - Subtraktionen wird der Code um ser Timing API etwas kürzer, wenn Sie Marken in Ihrem Code und Measure setzen zwischen den Markierungen.