在JavaScript中计算页面加载时间

Question 1

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

页面完全加载后，它将停止计时器，

但是即使有更长的时间，我有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;

因此，它基本上会创建一个称为百分百的变量，该变量每10毫秒（.01秒）增加1。

然后，如果该数字达到1000（1整秒），则称为secondsplace的变量将增加1，因为它已运行了整整秒数。

然后，它警告秒位，小数点和百分之一百位作为总加载时间。

但是上面的数字错误问题仍然存在。为什么？

Question 2

永远不要使用setInterval或setTimeout功能进行时间测量！它们不可靠，很有可能在文档解析和显示期间延迟JS执行计划。

相反，在页面开始加载时，使用Date对象创建时间戳记，并计算页面完全加载时的时间差：

<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

为什么这么复杂？何时可以：

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.

浏览器支持

更多信息

Question 4

@HaNdTriX提到的答案很好，但是我们不确定在下面的代码中是否完全加载了DOM：

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

当与onload一起使用时，这非常适用：

window.onload = function () {
    var loadTime = window.performance.timing.domContentLoadedEventEnd-window.performance.timing.navigationStart; 
    console.log('Page load time is '+ loadTime);
}

编辑1：添加了一些上下文来回答

注意： loadTime 以毫秒为单位，您可以除以1000以得到@nycynik提到的秒

Question 5

很难制定好的时序，因为Performance.dominteractive的计算错误（无论如何，对于时序开发人员来说都是一个有趣的链接）。

解析dom后，它仍然可以加载并执行延迟的脚本。并且等待css（css阻止dom）的内联脚本也必须加载，直到DOMContentloaded为止。所以还没有解析？

我们有readystatechange事件，可以查看readyState该，不幸的是，该状态缺少“分析了dom”，该状态发生在“ loaded”和“ interactive”之间。

当Timing API甚至没有给我们一段时间dom停止解析HTML并启动The End进程时，一切都会变得有问题。这个标准说的第一点必须是“互动”在dom解析后准确触发！当文档在解析后的某个时间完成加载时，Chrome和FF都实现了它。他们似乎（误）解释了标准，因为解析继续超出了延迟执行的脚本，而人们将DOMContentLoaded误认为是延迟执行之前而不是延迟执行之后的事情。无论如何...

我对你的建议是阅读有关导航计时API。或者通过简单的方法选择其中一个，或者运行所有三个并在浏览器控制台中查看...

  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);

文档开始后的时间以毫秒为单位。我已经使用Navigation Timing API进行了验证。

从您做起的那一刻起就var ti = performance.now()可以拿出几秒钟的样品parseInt(performance.now() - ti) / 1000

它不是那种性能.now（）减去，而是通过用户计时API缩短了代码，您可以在代码中设置标记并在标记之间进行度量。