Berechnung der Ladezeit von Seiten in JavaScript

Question 1

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?

Question 2

Verwenden Sie niemals die Funktionen setIntervaloder setTimeoutzur 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>

Question 3

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

Question 4

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: loadTime In Millisekunden können Sie durch 1000 teilen, um Sekunden zu erhalten, wie von @nycynik angegeben

Question 5

Es 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) / 1000

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