在 JavaScript 中计算页面加载时间

IT技术 javascript load setinterval
2021-01-28 04:32:25

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

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

但 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，因为这是它运行了多少整秒。

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

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

5个回答

为什么这么复杂？当您可以执行以下操作时：

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.

浏览器支持

更多信息

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

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

@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 提到的秒数

window.performance.timing 显然贬值了 developer.mozilla.org/en-US/docs/Web/API/Performance/timing
2021-03-15 04:32:25
确实如此，但是如果您处于极端的旧浏览器环境中（这不是我的想法），那么 PerformanceTiming 中的任何内容都是遥不可及的。使用在头节点中以 <script> 标记启动的计时至少会随着时间的推移让您了解哪些页面需要更长的时间来加载。
2021-03-20 04:32:25
是的，返回时间，以毫秒为单位。您可以除以 1000 得到秒数。((window.performance.timing.domComplete-window.performance.timing.navigationStart)/1000)+"秒";
2021-04-08 04:32:25
这会以毫秒为单位吗？
2021-04-10 04:32:25
navigationStart当您开始在浏览器中加载页面时开始。这样做的优点是它包括所有服务器端处理时间（对于主 HTML 页面）和任何网络延迟 - 这是不可能用在页面开头启动的简单 javascript 计时器计算的
2021-04-12 04:32:25

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

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

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

当 dom停止解析 HTML 并启动The End进程时，即使 Timing API 没有给我们时间，一切都会变得有问题。这个标准说第一点必须是“交互式”在 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

而不是那种 performance.now() 减法，通过User Timing API，您可以在代码中设置标记并在标记之间进行测量，从而缩短代码。

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

window.performance.timing.loadEventEnd-window.performance.timing.navigationStart
正如目前所写，您的答案尚不清楚。请编辑以添加其他详细信息，以帮助其他人了解如何解决所提出的问题。您可以在帮助中心找到有关如何编写好的答案的更多信息。
2021-03-27 04:32:25
其它你可能感兴趣的问题
上一篇如何在 JavaScript 中交换两个变量 下一篇javascript 函数领先！句法