javascript - 在 JavaScript 中计算页面加载时间

Question

我正在尝试制作一个网页，当它开始加载时，使用 Interval 来启动计时器。

当页面完全加载时，它会停止计时器，

但 99% 的时间我得到的时间测量值为 0.00 或 0.01，即使它需要更长的时间。

有时，它有时会说一些更有意义的东西，例如 .28 或 3.10。

下面是代码，如果有帮助的话:

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;

所以它基本上创建了一个名为 hundredthtimer 的变量，该变量每 10 毫秒(0.01 秒)增加“1”。

然后，如果这个数字达到 1000(1 整秒)，一个名为 secondsplace 的变量会增加 1，因为这是它运行了多少整秒。

然后，它会提示秒位、小数点和百位作为总加载时间。

但上面数字不正确的问题仍然存在。为什么？

Answer 1

为什么这么复杂？什么时候可以:

var loadTime = window.performance.timing.domContentLoadedEventEnd- window.performance.timing.navigationStart;

如果您需要更多时间，请查看 window.performance 对象:

console.log(window.performance);

将显示计时对象:

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 Support

More Info