在 JavaScript 中计算页面加载时间答案

【问题标题】：Calculating Page Load Time In JavaScript在 JavaScript 中计算页面加载时间
【发布时间】：2012-12-29 18:05:03
【问题描述】：

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

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

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

所以它基本上创建了一个名为百分之百的变量，它每 10 毫秒（0.01 秒）增加“1”。

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

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

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

【问题讨论】：

如果这只是出于调试目的，您应该使用更好的解决方案，例如 Firebug 或现代浏览器中包含的任何其他开发工具。它们会更加准确。
还有，inctimer 在哪里初始化？
@Bergi 你是对的，我被误导（或理解）差异。评论已删除！
有时我尝试使用 Firebug，但据我所知，它就像 Chrome 上的“检查元素”
为什么有人反对我的问题？

标签： javascript load setinterval

【解决方案1】：

永远不要使用setInterval 或setTimeout 函数来测量时间！它们不可靠，很可能是文档解析和显示过程中的JS执行调度延迟。

改为使用Date object 创建页面开始加载时的时间戳，并计算与页面完全加载时的时间差：

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

【讨论】：

好的，所以我对其进行了一些修改，以便它会提醒数字。所以现在，我第一次有一些奇怪的数字，比如 15 和 1399，或者其他类似的数字。第二个数字是以毫秒为单位的吗？（1/1000 秒）在这种情况下，第一个数字是多少（直到 dom 准备就绪的时间）？据我所知，它是通过在某事发生之前告诉它何时加载来预测未来....
等等，我想出了第二个问题。现在，我只需要确认“以毫秒为单位加载所有内容的时间”问题
是的，Date.now 以毫秒为单位返回时间戳。
为什么这个答案如此受欢迎？代码使用了jQuery，在加载过程中肯定不会太晚才可用吗？
@AlexanderWigmore：我也不知道为什么它很受欢迎，我想这只是从这个问题的 11k 观点来看。它使用 jQuery 绝对没有问题，因为无论如何它都需要测量加载脚本文件的时间。当然你也可以不使用 jQuery 并手动附加 DOMready 和 window.onload 的监听器。

【解决方案2】：

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

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

【讨论】：

var loadTime = window.performance.timing.domComplete-window.performance.timing.navigationStart;为什么这不起作用？这应该给出加载时间，正如你提到的给出 DOMContentLoaded 时间。我试过这个，它给了我 -(navigationStart)
对我来说效果很好。您能否提供更多详细信息（浏览器、版本等）。
浏览器：Chrome & 版本：32.0.1700.102
你确定你的DOM在你计算的时候已经完成加载了吗？
两者相同是有道理的，因为 domContentLoadedEventEnd 和 domComplete 是相同的。试试： document.addEventListener("DOMContentLoaded", function(event) { // 在这里做你的计算 }); （也许你的 jQuery 搞砸了）

【解决方案3】：

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

【讨论】：

会以毫秒为单位吗？
是的，返回时间，以毫秒为单位。您可以除以 1000 以获得秒数。 ((window.performance.timing.domComplete-window.performance.timing.navigationStart)/1000)+"sec.";
navigationStart 在您开始在浏览器中加载页面时开始。这样做的好处是它包括所有服务器端处理时间（用于主 HTML 页面）和任何网络延迟 - 这是不可能用在页面开头启动的简单 javascript 计时器计算的
确实如此，但是如果您处于极端的旧版浏览器环境中（这不是我的想法），那么 PerformanceTiming 中的任何内容都是遥不可及的。在头节点中使用由
window.performance.timing 明显贬值developer.mozilla.org/en-US/docs/Web/API/Performance/timing

【解决方案4】：

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

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

我们有readystatechange 事件，我们可以在其中查看readyState，不幸的是缺少发生在“加载”和“交互式”之间的“dom 已解析”。

如果 Timing API 没有给我们一个 dom 停止解析 HTML 并启动 The End 进程的时间，一切都会变得有问题。这个标准说第一点必须是“交互式”在 dom parsed 之后触发！ Chrome 和 FF 都在 document has finished loading 解析后的某个时间实现了它。他们似乎（错误地）解释了标准，因为解析继续超出了延迟执行的脚本，而人们将 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);

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

要从您执行var ti = performance.now() 的时间获得秒数，您可以执行parseInt(performance.now() - ti) / 1000

而不是那种 performance.now() 减法代码会缩短User Timing API，您在代码中设置marks，在标记之间设置measure。

【讨论】：

【解决方案5】：

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

window.performance.timing.loadEventEnd-window.performance.timing.navigationStart

【讨论】：

正如目前所写，您的答案尚不清楚。请edit 添加其他详细信息，以帮助其他人了解这如何解决所提出的问题。你可以找到更多关于如何写好答案的信息in the help center。