81

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

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

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

有时，它会说一些更有意义的东西，例如 0.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;

因此，它基本上创建了一个名为 percentthstimer 的变量，每 10 毫秒（0.01 秒）增加“1”。

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

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

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

4

5 回答 5

239

为什么这么复杂？什么时候可以做：

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.

浏览器支持

更多信息

于 2013-02-14T15:40:01.107 回答
85

永远不要使用setIntervalorsetTimeout函数来测量时间！它们不可靠，很可能是文档解析和显示过程中的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>
于 2013-01-15T17:16:43.337 回答
41

@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 所述

于 2015-01-05T12:27:26.627 回答
2

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

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

我们有readystatechange事件，我们可以查看readyState不幸的是缺少“dom is parsed”，它发生在“loaded”和“interactive”之间。

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

我给你的建议是阅读Navigation Timing 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);

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

要从你做的时间开始获得秒数，var ti = performance.now()你可以做parseInt(performance.now() - ti) / 1000

而不是那种 performance.now() 减法代码通过用户计时 API变得更短，您在代码中设置标记并在标记之间进行测量。

于 2019-04-23T02:30:48.987 回答
0

这是一个给出确切值的表达式：

window.performance.timing.loadEventEnd-window.performance.timing.navigationStart
于 2021-10-21T11:07:55.373 回答