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 99% der Zeit bekomme ich Zeitmessungen von 0,00 oder 0,01, selbst wenn es länger dauert.
Gelegentlich sagt es etwas, das manchmal sinnvoller ist, wie .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 genommen eine Variable namens Hundertstel erstellt, die alle 10 Millisekunden (0,01 Sekunden) um '1' erhöht wird.
Wenn diese Zahl 1000 erreicht (1 volle Sekunde), erhöht sich eine Variable namens Sekundenplatz um 1, da dies die Anzahl der vollen Sekunden ist, für die sie ausgeführt wurde.
Dann werden Sekunden, Dezimalpunkt und Hundertstel als Gesamtladezeit angezeigt.
Das obige Problem mit falschen Nummern besteht jedoch weiterhin. Warum?
quelle
Antworten:
Verwenden Sie niemals die Funktionen
setIntervalodersetTimeoutzur Zeitmessung! Sie sind unzuverlässig und es ist sehr wahrscheinlich, dass sich die Planung der JS-Ausführung während des Parsens und Anzeigens von Dokumenten verzögert.Verwenden Sie stattdessen das
DateObjekt , um einen Zeitstempel zu erstellen, als die Seite geladen wurde, und berechnen Sie die Differenz zu der Zeit, 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>quelle
Date.nowgibt einen Zeitstempel in Millisekunden zurück.Warum so kompliziert? Wenn Sie Folgendes tun können:
var loadTime = window.performance.timing.domContentLoadedEventEnd- window.performance.timing.navigationStart;Wenn Sie mehr Zeit 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.Browser-Unterstützung
Mehr Info
quelle
Die von @HaNdTriX erwähnte Antwort 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); }Bearbeiten 1: Kontext zur Beantwortung hinzugefügt
Hinweis:
loadTimeIn Millisekunden können Sie durch 1000 teilen, um Sekunden zu erhalten, wie von @nycynik angegebenquelle
navigationStartbeginnt, wenn Sie die Seite in den Browser laden. Dies hat den Vorteil, dass es die gesamte serverseitige Verarbeitungszeit (für die Haupt-HTML-Seite) und jegliche Netzwerklatenz umfasst - die mit einem einfachen Javascript-Timer, der am Anfang der Seite gestartet wurde, nicht berechnet werden kannEs ist schwierig, ein gutes Timing zu erstellen , da die Datei performance.dominteractive falsch berechnet wird (ein interessanter Link für Timing-Entwickler).
Wenn dom analysiert wird, kann es dennoch 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 Ereignis , wo wir uns anschauen können Readystate , dass leider fehlt „dom analysiert wird“ , das irgendwo zwischen „geladen“ geschieht und „interaktiv“.
Alles wird problematisch, wenn nicht einmal die Timing-API uns eine Zeit gibt, in der dom aufgehört hat, HTML zu analysieren und den End- Prozess zu starten . Dieser Standard besagt, dass der erste Punkt sein muss, dass "interaktiv" genau nach dem Dom- Parsen ausgelöst wird ! Sowohl Chrome als auch FF haben es implementiert, wenn das Laden des Dokuments einige Zeit nach dem Parsen abgeschlossen ist. Sie scheinen die Standards (falsch) zu interpretieren, da das Parsen über die verzögerten Skripte hinaus fortgesetzt wird, während die Benutzer DOMContentLoaded als etwas interpretieren, das vor der verzögerten Ausführung und nicht danach passiert. Wie auch immer...
Meine Empfehlung für Sie ist etwa lesen Navigation Timing - API . Oder gehen Sie den einfachen Weg und wählen Sie einen Oneliner aus diesen aus, oder führen Sie alle drei aus und schauen Sie in die Konsole Ihres Browsers ...
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 nach dem Start des Dokuments angegeben. Ich habe mit der Navigation Timing API überprüft .
Um Sekunden zum Beispiel von der Zeit zu bekommen, die Sie getan haben
var ti = performance.now(), können Sie tunparseInt(performance.now() - ti) / 1000Anstelle dieser Art von Performance.now () - Subtraktionen wird der Code durch die User Timing API etwas kürzer, wobei Sie Markierungen in Ihrem Code setzen und zwischen Markierungen messen .
quelle