在JavaScript中计算页面加载时间

小编典典

在JavaScript中计算页面加载时间

javascript

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

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

但是即使有更长的时间，我有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，因为它已运行了整整秒数。

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

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

阅读 623

2020-05-01

共1个答案

小编典典

永远不要使用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>

2020-05-01