webentwicklung-frage-antwort-db.com.de

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?

60
zingzing45

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

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.

Browser-Unterstützung

Mehr Info

186
HaNdTriX

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

31
Samdeesh

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.